Question

I found a nice snippet here on Stack which grabs the text from a link and appends it to the a tag as a class:

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

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

It works great except that I have a list of linked search results that output (numbers), e.g. (19) after the link text.

So the structure of my HTML after the JQuery above is applied is as such:

<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>

As you can see, it’s not ideal. If possible, I’d like to at least get rid of the numbers in parenths i.e. (1), (19) etc… and then put dashes and with the text and lower case. Note this is for a faceted search result so the links will never all be together or in the same order. I am simply trying to apply dynamic classes based on the link text name so I can do other things down the road in a theming realm.

so this:

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

… would become this:

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

Answer 1

Try something like below,

DEMO

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