用Javascript替換標簽內的字符串

Question

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

使用jQuery或Javascript，我如何能夠將“產品”一詞重命名為其他值？

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));

---

另外，一種更簡單的方法是將“ Product”放入其自己的元素中，然后僅替換該元素的文本：

<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');