Replace Text with jQuery issue

Question

I'm having a little trouble getting this to work correctly.

I have breadcrumbs with the following structure

<nav class="breadcrumb" >
    <a href="http://example.com">Home</a>       
        ">"         
    <a href="http://example.com/category/Mens/">Mens</a>        
        "> Mens Clothing"       
</nav>

Which outputs to:

Home>Mens>Mens Clothing

I want:

Home>Mens>Clothing

And my code for replacing the last part of the breadcrumb:

$(".breadcrumb").text(function(){
    return $(this).text().replace("Mens Clothing", "Clothing");
})

My problem is that my code removes the links and just leaves me with"

<nav class="breadcrumb" >
    "Home>Mens>clothing"
</nav>

with no links.

Not sure why. Please help

Why don't you render it server side instead? If you don't want "> Mens Clothing", why are you in first place setting it? — A. Wolff
– A. Wolff, Commented Jun 14, 2015 at 18:17

Marcos Dimitrio · Accepted Answer · 2015-06-14 18:16:34Z

2

Try using html() instead of text():

$(".breadcrumb").html(function(){
    return $(this).html().replace("Mens Clothing", "Clothing");
});

edited Jun 14, 2015 at 18:16

answered Jun 14, 2015 at 18:14

Marcos Dimitrio

6,9306 gold badges42 silver badges64 bronze badges

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

1 Comment

John_911 Over a year ago

Bingo! Thanks. I'll look up the difference between the two, though I can already kinda guess. Thanks!!!!

AmmarCSE · Accepted Answer · 2015-06-14 18:25:31Z

0

With your current HTML, you could change your approach to

<nav class="breadcrumb" >
    <a href="http://example.com">Home</a>       
        ">"         
    <a href="http://example.com/category/Mens/">Mens</a>        
        "> <span data-last-crumb>Mens Clothing</span>"       
</nav>


$("[data-last-crumb]").text("Clothing");

edited Jun 14, 2015 at 18:25

answered Jun 14, 2015 at 18:14

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

Collectives™ on Stack Overflow

Replace Text with jQuery issue

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related