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

【问题标题】：Adding class based on contents of link text根据链接文本的内容添加类
【发布时间】：2012-05-12 03:16:42
【问题描述】：

我在 Stack 上找到了一个不错的 snippet，它从链接中获取文本并将其作为类附加到 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>

【问题讨论】：

您需要这个有什么特别的原因吗？听起来很复杂。您可以改用li 元素的index 来识别它们。
@RoryMcCrossan 问题是它们是分面搜索的搜索结果，因此永远不会一起出现或以相同的顺序出现。

标签： javascript jquery text replace

【解决方案1】：

我发现了一个小函数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/

【讨论】：

【解决方案2】：

一些基本的正则表达式会得到你正在寻找的格式。

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

试试下面的方法，

DEMO

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

【讨论】：

这里有一些很棒的答案，但我喜欢这个！谢谢。