Question

<nav class="woocommerce-breadcrumb"><a href="http://domain.com/" class="home">Home</a> &gt; Product</nav>

使用jQuery或Javascript我怎样才能将“Product”这个词重命名为其他值？

var brandname = $('.tax-product_brand h1.page-title').text();
var crumb = $('.woocommerce-breadcrumb').text();
console.log(crumb);
crumb.replace("Product", brandname);

我试过上面但没有运气

Answer 1

然后，您需要将字符串插入DOM。实际上，您只是在进行字符串操作并丢弃返回值。

$('.woocommerce-breadcrumb').text(crumb.replace("Product", brandname));

编辑：正如评论中所述，您应该使用.html()代替.text()。 .text()会删除所有HTML，即您的<a>代码。

Answer 2

使用.html()而不是.text()，否则您将丢失标记：

var crumb = $('.woocommerce-breadcrumb').html();

然后将值应用回元素：

$('.woocommerce-breadcrumb').html(crumb.replace("Product", brandname));

或者，更简单的方法是将产品放在＆＃34;产品＆＃34;在它自己的元素中，然后只需替换该元素的文本：

<nav class="woocommerce-breadcrumb"><a href="http://domain.com/" class="home">Home</a> &gt; <span class="item">Product</span></nav>

然后你的jQuery就是：

$(".woocommerce-breadcrumb .item").text(brandname);

Answer 3

.replace返回一个新字符串，因此您必须使用返回的字符串设置crumb的文本。

Answer 4

取代了以下是演示。

var brandname = 'My Name';

var crumb = 'My Product';

console.log(crumb);

var d= crumb.replace("Product", brandname);

alert(d);

Answer 5

var brandname = $('.tax-product_brand h1.page-title').text();
$(".woocommerce-breadcrumb:contains('Product')").html(function(_, html) {
    return  html.replace(/(Product)/g, '<span>'+brandname+'</span>')
});

我能够使用上述内容来获得我想要的内容，同时保持标签的格式

Answer 6

避免使用自由文本。当你进行DOM计算时，这会增加处理开销。

如果您可以使用标签显示最终产品/页面名称，那就太好了。 html看起来像：

  <nav class="woocommerce-breadcrumb">
        <a href="http://domain.com/" class="home">
            Home
        </a> 
        <span class="currentPage">>Product</span>

    </nav>

现在，您可以使用简单的DOM操作来更改期望元素的text（）。

var currentPage=$(".currentPage");
$(currentPage).text('> NewText');

用于替换标记内的字符串的Javascript

6 个答案: