Question

I have a <div id="bread"></div> and I am trying to display breadcrumbs where one of the string contains Tab3 ».

Its like Tab1 > Tab2 > Tab3 » > Tab4 except that > is an arrow-right.png image.

I want to remove &raquo or » from Tab3 ».

I want to search if the selected tab has » or &raquo in it and if it does then I want to replace it with "" so that Tab3 » becomes Tab3.

I’ve tried the following but it doesn’t seem to work.

$("document").ready(function() {
    var crumbs = $("a.selected");

    jQuery.each(crumbs, function() {

        if(this != crumbs.get([0])) {
            $("#bread").append(" ");           
        }           
        $("#bread").append("<img src='<c:url value="/resources/images/arrow-right.png" />' />" + "&nbsp;");

            var crumb = $(this).html();
            var slicedCrumb;
            if(crumb.indexOf(' &raquo; ') != -1) {
                slicedCrumb = $(this).html().replace(' &raquo; ', '');              
                $("#bread").append(slicedCrumb);
            }
            else {
                $("#bread").append(crumb);
            }

     });
}); 

I also tried to use » at the place of » but that din’t seem to work either.

$("document").ready(function() {
    var crumbs = $("a.selected");

    jQuery.each(crumbs, function() {

        if(this != crumbs.get([0])) {
            $("#bread").append(" ");           
        }           
        $("#bread").append("<img src='<c:url value="/resources/images/arrow-right.png" />' />" + "&nbsp;");

            var crumb = $(this).html();
            var slicedCrumb;
            if(crumb.indexOf(' » ') != -1) {
                slicedCrumb = $(this).html().replace(' » ', '');                
                $("#bread").append(slicedCrumb);
            }
            else {
                $("#bread").append(crumb);
            }

     });
});

I’ve spent quite sometime reading other posts on the given subject but somehow I am not able to get it working. Could someone help me understand what am I missing here? I am using jquery-1.5.js to run this code. Do I need to use the newer version of jquery or any other library as well to get it working?

Answer 1

slicedCrumb = $(this).html().replace(/\»/g, '');

The important part is escaping the » character. Also I added the global (g) flag so that if there are multiple instances that match the regex, they will all be removed.

Here is a demo: http://jsfiddle.net/YXXZs/1/

UPDATE

If you want to check if a character exists before trying to replace it then you can use .match():

var text = $(this).html();
if (text.search(/\»/) > -1) {
    slicedCrumb = text.replace(/\»/g, '');
}

Here is a demo: http://jsfiddle.net/YXXZs/4/

Docs for .match(): https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/match