Question

我在Stack上发现了一个很好的snippet，它从链接中抓取文本并将其作为类附加到标记：

$('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>

Answer 1

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

$('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
});

Answer 2

尝试以下内容，

DEMO

$(function() {
    $.each($('ul li a'), function() {
        var text = $(this).text();
        this.className = $.trim(text.replace(/\(\d*\)/g, '').toLowerCase()).replace(/\s/, '_');
    });
});

Answer 3

我找到了一个小函数here。有了它的帮助，我想下面的代码对你有用;

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/

Answer 4

$('a.nav').each(function() {
    var oSelf = $(this);
    var sClass = oSelf.html()
        .toLowerCase()
        .replace(/(\w)(\W\([0-9]+\))/, '$1')
        .replace(' ', '-');
    oSelf.addClass(sClass);
});

根据链接文本的内容添加类

4 个答案: