Question

I’m trying to modify this bit of HTML with jQuery to delete the duplicate arrow:

<div class="breadcrumb">
<a href="/spa/">Home</a> »  » <a href="/spa/image/tid">Image galleries</a>
</div>

I’m not having much luck, however, in that replacing the string using the replace() function seems to strip the HTML tags as well, leaving:

<div class="breadcrumb">Home » Image galleries</div>

My existing dodgy code is:

$('.breadcrumb').each(function() { 
    var mytext = $(this); 
    var mytext2 = mytext.text(); 
    mytext.text(mytext2.replace(' » » ',' » ')); 
});

Any ideas?

Cheers,
James

Answer 1

It sounds like you’re modifying the code using innerText or jQuery’s .text(). When using these, HTML is stripped out and only the text is returned. Use .innerHTML or .html() instead.

Using your “dodgy” code:

$('.breadcrumb').each(function() {  
    var mytext = $(this);  
    var mytext2 = mytext.html();  
    mytext.html(mytext2.replace(' » » ',' » '));  
});