How to grab a word or character and wrap it in a span tag?

Question

I'm trying to find a particular character in a div and wrap it in a span tag.

I thought I could use something like:

$('.breadcrumb:contains("»")').replaceWith('<span>»</span>');

But this changes the whole breadcrumb div.

What am I doing wrong?

Answer 1

.replaceWith only works on nodes. You need the string method .replace() instead:

var $bc = $('.breadcrumb');
$bc.html($bc.text().replace('»', '<span>»</span>'));

Like Mr. Craver suggested, you can also call:

$bc.html(function(i, html) {
    return html.replace('»', '<span>»</span>');
});

Example: http://www.jsfiddle.net/jwJKr/

Answer 2

var $bc = $('.breadcrumb');
$bc.html($bc.text().split('»').join('<span>»</span>'));

Works better to replace all characters.