使用原生JS将h1标题内No替换为N^o并正常渲染标签

你直接修改文本节点的nodeValue时，所有内容都会被识别为纯文本，写的HTML标签会被自动转义，因此不会被浏览器解析为DOM元素，只能显示成字符串。

如果你的h1标题内包含其他子元素、或者有绑定事件的节点，用这个方案不会破坏原有DOM结构和事件绑定：

const title = document.querySelector('.product__title');
const walker = document.createTreeWalker(title, NodeFilter.SHOW_TEXT);
const textNodes = [];

// 先收集所有文本节点，避免DOM修改影响遍历
let node;
while (node = walker.nextNode()) {
  textNodes.push(node);
}

textNodes.forEach(textNode => {
  const text = textNode.nodeValue;
  // 全局匹配所有No并拆分文本
  const parts = text.split(/(No)/g);
  // 没有匹配到则跳过当前节点
  if (parts.length === 1) return;

  const fragment = document.createDocumentFragment();
  parts.forEach(part => {
    if (part === 'No') {
      // 拆分N和带sup标签的o
      fragment.appendChild(document.createTextNode('N'));
      const sup = document.createElement('sup');
      sup.textContent = 'o';
      fragment.appendChild(sup);
    } else {
      fragment.appendChild(document.createTextNode(part));
    }
  });

  // 替换原有文本节点
  textNode.parentNode.replaceChild(fragment, textNode);
});

如果你的h1标签内只有纯文本、没有其他子元素和绑定事件，可以直接用innerHTML实现，代码更短：

const title = document.querySelector('.product__title');
title.innerHTML = title.innerHTML.replace(/No/g, 'N<sup>o</sup>');

注意：该方案会覆盖原有h1内的所有DOM结构，原有子元素的事件绑定会全部失效。

内容的提问来源于stack exchange，提问作者Rasmus Andersen