CODEWITHSUNDEEP
javascriptjquerytextreplace
Danny Englander
Danny Englander

Reputation: 2044

Adding class based on contents of link text

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>

Upvotes: 0

Views: 228

Answers (4)

michael
michael

Reputation: 4483

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

Upvotes: 1

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

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/, '_');
    });
});

Upvotes: 2

MikeM
MikeM

Reputation: 27405

some basic regex will get the format you're looking for.

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

Upvotes: 3

Emre Erkan
Emre Erkan

Reputation: 8482

I found a small function here. With it's help I guess below code will work for you;

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

Example: http://jsfiddle.net/CjdsG/

Upvotes: 1

Related Questions