如何优化HTML孤儿词处理脚本，避免标题标签内子元素被误添加 

嘿，我清楚你碰到的坑了——你的脚本现在会误伤标题里子标签的属性空格，比如把<i class="fa fa-angle-right">里的空格替换成 ，直接导致样式崩了。问题出在你直接对整个元素的HTML内容做操作，没区分开纯文本节点和元素节点，把标签属性里的空格也当成普通文本空格处理了。

优化思路 #

我们需要只针对元素的直接纯文本内容做孤儿词处理，完全跳过子元素（比如<i>这类标签），更不能碰它们的属性。核心是只操作文本节点，而不是整个HTML字符串。

优化后的代码 #

// 针对单词数超过3个的字符串避免孤儿词
$("p:not(.form-row),h1,h2,h3,h4,h5,h6").each(function (i, elem) {
  const $elem = $(elem);
  // 获取当前元素的所有子节点，筛选出纯文本节点
  const textNodes = $elem.contents().filter(function() {
    return this.nodeType === Node.TEXT_NODE;
  });

  textNodes.each(function() {
    let text = this.textContent.trim();
    // 跳过空的文本节点（比如换行、空格组成的节点）
    if (!text) return;

    const words = text.split(/\s+/); // 用正则分割任意数量的空格
    if (words.length > 3) {
      const lastWord = words.pop();
      // 用Unicode非换行空格字符，避免HTML转义问题
      const newText = words.join(' ') + '\u00A0' + lastWord;
      // 替换当前文本节点的内容
      this.textContent = newText;
    }
  });
});

关键细节说明 #

• 只处理文本节点：通过contents()获取所有子节点，再用nodeType === Node.TEXT_NODE筛选出纯文本节点，确保我们只操作可见的文本内容，完全不碰子元素及其属性。
• 避免HTML转义问题：用Unicode字符\u00A0代替 ，因为textContent会直接识别这个字符，不需要转义，也不会影响到HTML结构。
• 兼容多空格场景：用/\s+/正则分割单词，处理文本中多个连续空格的情况，避免拆分出空字符串。

执行这个脚本后，你的标题会变成期望的样子：

Common FAQs 

文本部分的最后两个单词之间插入了非换行空格，而<i>标签的class属性里的空格完全不受影响，样式也就正常了。

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