在标题中的特定字符周围插入标签答案

【问题标题】：Inserting a tag around a specific character in a title在标题中的特定字符周围插入标签
【发布时间】：2021-09-10 10:06:48
【问题描述】：

我需要使用 vanilla javascript 在 h1 标题内将 'No' 替换为 'N^o'。所以简而言之，我想通过搜索它的类'.product__title'来找到h1标签，搜索h1标签内的文本并找到'No'的每个实例，然后在'o'周围包裹一个sup标签，比如下面

N<sup>o</sup>

标题的例子可以是'Table N^o 04'

这是我尝试过的代码，它找到并替换了这个词 - 但我无法在“o”周围插入子标签，而浏览器没有将子标签实际呈现为文本而不是 html。

var html = document.querySelector('.product__title');
  var walker = document.createTreeWalker(html, NodeFilter.SHOW_TEXT);
  var node;
  while (node = walker.nextNode()) {
    node.nodeValue = node.nodeValue.replace(/No/, 'N<sup>o</sup>')
  }

任何帮助将不胜感激。上面的代码是我找了一个教程，所以不是我的原始代码。

【问题讨论】：

标签： javascript replace tags

【解决方案1】：

为什么这么复杂？

[...document.querySelectorAll("h1.product__title")]
  .forEach(h1 => h1.innerHTML = h1.textContent.replace("No ","N<sup>o</sup> "))

<h1 class="product__title">Table No 04</h1>
<h1 class="product__title">Table No 05</h1>

【讨论】：