0

我在 Stack 上找到了一个不错的片段，它从链接中获取文本并将其作为类附加到 a 标签：

$('a.nav').each(function() {

    // add class with name of the link's text
    $(this).addClass($(this).text());
});

它工作得很好，除了我有一个(numbers), e.g. (19)在链接文本之后输出的链接搜索结果列表。

所以应用上面的 JQuery 之后我的 HTML 的结构是这样的：

<li><a class="Basic page (1)" href="#">Basic page (1)</a></li>
<li><a class="Blog (19)" href="#">Blog (19)</a></li>
<li><a class="News (4)" href="#">News (4)</a></li>

如您所见，这并不理想。如果可能的话，我想至少去掉括号中的数字，例如(1)，(19)等等……然后加上破折号，加上文字和小写字母。请注意，这是针对多面搜索结果的，因此链接永远不会全部在一起或以相同的顺序排列。我只是尝试基于链接文本名称应用动态类，以便我可以在主题领域中做其他事情。

所以这：

<li><a class="Basic page (1)" href="#">Basic page (1)</a></li>

...会变成这样：

<li><a class="basic-page" href="#">Basic page (1)</a></li>
4

4 回答 4

3

一些基本的正则表达式将获得您正在寻找的格式。

$('a.nav').each(function() {

    // add class with name of the link's text
    $(this).addClass($(this).text()
        .toLowerCase()
        .replace(/(\s\(\d+\))/, '') // replaces ' ([digit(s)])'
        .replace(/\s+/g, '-')); // replaces spaces with dashes
});
于 2012-05-02T15:59:49.333 回答
2

试试下面的东西，

演示

$(function() {
    $.each($('ul li a'), function() {
        var text = $(this).text();
        this.className = $.trim(text.replace(/\(\d*\)/g, '').toLowerCase()).replace(/\s/, '_');
    });
});
于 2012-05-02T16:05:18.847 回答
1

我在这里找到了一个小功能。在它的帮助下，我猜下面的代码对你有用；

HTML：

<ul>
  <li><a href="#" class="nav">Basic page (1)</a></li>
  <li><a href="#"class="nav">Blog (19)</a></li>
  <li><a href="#"class="nav">News (4)</a></li>
</ul>

Javascript：

function string_to_slug(str) {
  str = str.replace(/^\s+|\s+$/g, ''); // trim
  str = str.toLowerCase();

  // remove accents, swap ñ for n, etc
  var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
  var to   = "aaaaeeeeiiiioooouuuunc------";
  for (var i=0, l=from.length ; i<l ; i++) {
    str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
  }

  str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
    .replace(/\s+/g, '-') // collapse whitespace and replace by -
    .replace(/-+/g, '-'); // collapse dashes

  return str;
}

jQuery(function($) {
    $('a.nav').each(function() {

        // add class with name of the link's text
        $(this).addClass(string_to_slug($(this).text()));
    });
});

示例：http: //jsfiddle.net/CjdsG/

于 2012-05-02T15:59:42.500 回答
1 
$('a.nav').each(function() {
    var oSelf = $(this);
    var sClass = oSelf.html()
        .toLowerCase()
        .replace(/(\w)(\W\([0-9]+\))/, '$1')
        .replace(' ', '-');
    oSelf.addClass(sClass);
});
于 2012-05-02T16:03:00.430 回答