如何用jQuery将HTML拆分为含标签内外文本的文本段数组？

我明白你需要把HTML内容拆成包含纯文本和带标签元素的连续文本段（run），用来后续转换为OpenXML。之前的jQuery代码只获取了子元素，漏掉了标签间的文本，这是因为它只遍历了元素节点，没处理文本节点。

这里给你一个可行的解决方案，核心是利用jQuery的contents()方法获取目标元素下的所有子节点（包括文本节点和元素节点），然后分别处理：

const segmentArray = $('#input').contents().map(function() {
  // 处理文本节点：过滤纯空白内容，清理首尾多余空格
  if (this.nodeType === Node.TEXT_NODE) {
    const cleanedText = this.nodeValue.replace(/^\s+|\s+$/g, '');
    // 只保留非空的文本段
    return cleanedText ? cleanedText : null;
  }
  // 处理元素节点：返回完整的outerHTML（包含标签和内容）
  if (this.nodeType === Node.ELEMENT_NODE) {
    return this.outerHTML;
  }
  // 忽略注释、CDATA等其他类型节点
  return null;
}).get();

console.log(segmentArray);

代码说明： #

• contents()：这是关键，它能获取目标元素内的所有子节点，包括文本、元素、注释等，而不像children()只拿元素节点。
• 节点类型判断：
  • 文本节点：先清理首尾的多余空格（比如缩进、换行带来的空白），如果清理后内容非空，就保留这段文本；如果是纯空白的文本节点（比如换行缩进），直接忽略。
  • 元素节点：直接返回它的outerHTML，也就是带标签的完整内容，比如<b>Spain</b>。
• get()：把jQuery的映射结果转换成普通数组，方便后续处理。

测试结果： #

针对你给出的HTML示例：

<div id=input>
  The rain in <b>Spain</b> falls <i>mainly</i> in the <u>plain</u>
</div>

运行代码后会得到你期望的结果：

[
  "The rain in",
  "<b>Spain</b>",
  "falls",
  "<i>mainly</i>",
  "in the",
  "<u>plain</u>"
]

这个方案能准确区分纯文本段和带样式的元素段，正好满足你后续转换OpenXML时提取样式的需求。

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