javascript - 如何多次替换同一个字符？

Question

我需要用 jQuery 为类相同的所有元素替换特定字符。考虑这个 html 代码:

<div class="product-name">
   <h1>Apple®</h1>
</div>

<div class="product-name">
   <h2>iPhone®</h2>
</div>

<div class="product-name">
   <h3>iPhone 5S®</h3>
</div>

我需要用这段代码替换所有带有上标标签的 ® 字符:

$('.product-name').html(
  $('.product-name').html().replace(/®/gi, '<sup>&reg;</sup>')
);

但是，此代码将仅替换第一次出现的位置。对于第二次及以后出现的情况，它会将整个产品名称替换为包含 h1 标签的第一个产品名称。

如何只替换 ® 字符而不更改其他字符和标签？

Answer 1

您可以使用 callback in html()将值返回给集合中的每个元素

$('.product-name').html(function(_, html) {
     return html.replace(/®/gi, '<sup>&reg;</sup>')
});

FIDDLE