Reputation: 609
I am using WooCommerce and have had to include
<br>
in a product name.
This break now shows up as
<br />
in the .woocommerce-breadcrumb.
this is what the breadcrumb looks like:
<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">
<a href="http://localhost/WP">Home</a>
/
<a href="http://localhost/WP/product-category/guitars/">Guitars</a>
/
<a href="http://localhost/WP/product-category/guitars/electric-guitars/">Electric Guitars</a>
/
<a href="http://localhost/WP/product-category/guitars/electric-guitars/fender-electric-guitar/">Fender-123-electric-guitar</a>
/ Fender American Standard<br /> Stratocaster Sienna Sunburst
</nav>
As you can see the last line before the nav contains the break which in the browser literally looks like < br / >
At the moment I am trying this to get rid of it, but it breaks the breadcrumb's functionality!
$(function() {
$( '.woocommerce-breadcrumb' ).text(function(_,txt) {
return txt.split('<br />').shift();
});
});
Any advice?
Thanks!
Upvotes: 1
Views: 144
Reputation: 144709
text
method is destructive, i.e. it resets content of the element. You could iterate through the childNodes
and modify nodeValue
of the textNode
s.
$( '.woocommerce-breadcrumb' ).contents().each(function() {
if ( this.nodeType === 3 ) {
this.nodeValue = this.nodeValue.replace(/<br \/>/g, '');
}
});
Upvotes: 1