如何替换 html 中的文本（不包括标签属性）？

Question

我正在尝试在 HTML 中的公司名称旁边添加 商标符号 ^TM。

使用下面的文字：

<sup>TM</sup>

或

™

我有一个渲染的 HTML，我必须在其中添加商标符号。

HTML：

注意：我已经提到了 HTML 正文的一小部分

<div class="col-md-3">
<div class="logo"><img src="/wp-content/uploads/2017/02/logo.png" 
onClick="window.location='https://www.walmart.com'" 
alt="Walmart Inc"  title="This is Walmart Inc for your help" style="pointer-events:all" />
</div></div>

<div class="submenu">
    <a href="/blog" target="_blank">Walmart Inc Blog</a>
    <a href="/blog" target="_blank">New Walmart Inc Products</a>
</div>
<meta itemprop="brand" content=" Walmart Inc"><p>Welcome to Walmart Inc.</p>

尝试了以下选项：

$("body").children().each(function () {
    $(this).html($(this).html().replace(/Walmart Inc/g, "Walmart Inc™"));
});

上面的选项替换了“HTML标签属性的值”，即alt，img的标题，这是我不想要的。

$("body").children().each(function () {
    $(this).html($(this).text().replace(/Walmart Inc/g, "Walmart Inc™"));
});

& 这会导致从正文中删除所有 HTML 标记。

如何在替换时排除标签属性内的文本？

期望的输出：

<div class="col-md-3">
<div class="logo"><img src="/wp-content/uploads/2017/02/logo.png" 
onClick="window.location='https://www.walmart.com'" 
alt="Walmart Inc"  title="This is Walmart Inc for your help" style="pointer-events:all" />
</div></div>

<div class="submenu">
    <a href="/blog" target="_blank">Walmart Inc™ Blog</a>
    <a href="/blog" target="_blank">New Walmart Inc™ Products</a>
</div>
<meta itemprop="brand" content=" Walmart Inc"><p>Welcome to Walmart Inc™.</p>

Answer 1

仅针对文本节点并仅用更新的 html 替换特定文本节点的方法。不会影响alt, title etc等属性

这将优于替换可能导致丢失事件侦听器的较大 html 块，因为您只替换文本而没有该文本的父元素

var term = "Walmart Inc";

$('body *:contains("' + term + '")')
  .not(':has(:contains("' + term + '"))')
  .contents().each(function() {
    // nodeType for text nodes is 3
    if (this.nodeType === 3 && this.textContent.includes(term)) {
      var html = this.textContent.replace(term, term + '™')
      // replace text node with html
      $(this).replaceWith(html)
    }

  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
  <div class="logo"><img src="/wp-content/uploads/2017/02/logo.png" onClick="window.location='https://www.walmart.com'" alt="Walmart Inc" title="This is Walmart Inc for your help" style="pointer-events:all" />
  </div>
</div>

<div class="submenu">
  <a href="/blog" target="_blank">Walmart Inc Blog</a>
  <a href="/blog" target="_blank">New Walmart Inc Products</a>
</div>
<meta itemprop="brand" content=" Walmart Inc">
<p>Welcome to Walmart Inc.</p>

Answer 2

function insertTMAfter(name) {
    document.querySelectorAll('*').forEach(function(item){
        if(item.children.length == 0)
            item.innerHTML = item.innerHTML.replace(name, name + "™");
    })
}

insertTMAfter("Stack Overflow");

// or in your case
insertTMAfter("Walmart Inc");