Add a span tag to certain characters in a string with javascript/jquery

Question

I have output from a CMS where I need to add a style to a certain character in the string. For instance, my output is:

 <div class="date">12 // 14 // 2013</div>

How can I add:

<span style="slashColor">

to the two double slashes so that my result would be:

<div class="date">12 <span class="slashColor">//</span> 14 <span class="slashColor">//</span> 2013</div>

And what have you tried? Why not do it with server side code? — putvande
– putvande, Commented Oct 15, 2013 at 21:11
Collect up the HTML inside the date div. Modify it to have the new span tags and put it back. — Lee Meador
– Lee Meador, Commented Oct 15, 2013 at 21:13
As long as you know that the double-slashes will occur in .date objects, you can use jQuery to iterate through them with $(".date") and replace each occurrence of // with <span class="slashColor">//</span> — David Millar
– David Millar, Commented Oct 15, 2013 at 21:16

Sergio · Accepted Answer · 2013-10-15 21:27:49Z

3

Try this:

var original = $('.date').text();
var new_version = original.split('//').join('<span class="slashColor">//</span>');
$('.date').html(new_version);

Fiddle

If you have many div like the example you posted, you can use this:

$('.date').each(function () {
    var original = $(this).text();
    var new_version = original.split('//').join('<span class="slashColor">//</span>');
    $(this).html(new_version)
});

Fiddle

edited Oct 15, 2013 at 21:27

answered Oct 15, 2013 at 21:15

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kiamoz Over a year ago

@Sergio hey Sergio , could you please let me know how do I split string by vertical pixel size from top for example each 200 px add a break span , thanks

Maciej Łebkowski · Accepted Answer · 2013-10-15 21:17:35Z

1

var elements = document.getElementsByClassName('date');
for (var i = 0, e; e = elements[i++]; ) {
   e.innerHTML = e.innerHTML.replace(/\/\//g, '<span class="slashColor">//</span>');
}

or the jQuery way:

$('.date').each(function () {
  $(this).html($(this).html().replace(/\/\//g, '<span class="slashColor">//</span>'));
}

answered Oct 15, 2013 at 21:17

Maciej Łebkowski

3,94227 silver badges32 bronze badges

Collectives™ on Stack Overflow

Add a span tag to certain characters in a string with javascript/jquery

2 Answers 2

Fiddle

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related