HTML文本解析与样式属性提取：从嵌套标签中准确获取带格式的文本内容-php教程-PHP中文网

HTML文本解析与样式属性提取：从嵌套标签中准确获取带格式的文本内容

本文介绍如何使用javascript的domparser解析html字符串，递归提取嵌套标签中的文本及其样式属性（如粗体、斜体、下划线等），生成结构化数据，便于后续映射到indesign字符样式等专业排版场景。

在自动化排版工作流（如将HTML内容导入Adobe InDesign脚本）中，仅提取纯文本远远不够——必须保留原始语义化样式信息（→粗体、→斜体、→下划线、^{→上标等），尤其当标签深度嵌套时（如 BoldUnderlined），需确保“Underlined”同时继承父级和自身的双重样式。}

推荐方案是利用浏览器/Node.js（v15.0+ 支持 --experimental-global-fetch 或配合 jsdom）中原生的 DOMParser API，它能将HTML字符串安全解析为标准DOM树，完整保留节点层级与文本节点关系。以下是一个健壮的解析函数示例：

function parseStyledText(htmlString) {
  // 解析HTML为文档对象
  const doc = new DOMParser().parseFromString(htmlString, 'text/html');
  // 提取body内首个有效段落（或按需定位目标元素）
  const root = doc.body?.firstElementChild || doc.documentElement;

  // 递归遍历DOM树，构建带样式的文本结构
  function walk(node) {
    if (node.nodeType === Node.TEXT_NODE) {
      const text = node.textContent.trim();
      return text ? { text, styles: [] } : null;
    }

    if (node.nodeType !== Node.ELEMENT_NODE) return null;

    const styles = [];
    // 映射常见HTML内联标签到样式标识符
    switch (node.tagName.toLowerCase()) {
      case 'b': case 'strong': styles.push('bold'); break;
      case 'i': case 'em':   styles.push('italic'); break;
      case 'u':              styles.push('underline'); break;
      case 'sup':            styles.push('superscript'); break;
      case 'sub':            styles.push('subscript'); break;
      case 's': case 'del':  styles.push('strikethrough'); break;
      default: break;
    }

    const children = Array.from(node.childNodes)
      .map(walk)
      .filter(Boolean);

    if (children.length === 0) return null;

    // 合并子节点样式：父级样式 + 子节点自身样式
    return children.map(child => ({
      ...child,
      styles: [...styles, ...child.styles]
    }));
  }

  return walk(root) || [];
}

// 示例调用
const html = '<p>Normal<b>Bold</b> <b>Bold<u>Underlined</u></b> <b><i>Bold Italic</i></b></p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill13063" title="Java Development Man"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Java Development Man" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill13063" title="Java Development Man" class="overflowclass">Java Development Man</a>
													<p class="overflowclass">Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill13063" title="Java Development Man" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>';
const result = parseStyledText(html);
console.log(JSON.stringify(result, null, 2));

输出结构说明：
每个文本片段以 { text: "...", styles: ["bold", "underline"] } 形式呈现，清晰表达样式叠加关系。例如 "Underlined" 的 styles 数组为 ["bold", "underline"]，可直接映射至InDesign脚本中连续应用 appliedCharacterStyle。

✅ 注意事项：

确保运行环境支持 DOMParser（现代浏览器、Node.js ≥15.0 + --experimental-global-fetch，或使用 jsdom 库模拟DOM）；
实际生产中建议增加HTML清洗步骤（如移除<script>、<style>等非内容标签），避免意外执行； </script>
对于复杂CSS类驱动的样式，需额外解析class属性并建立映射表；
InDesign脚本中应用样式时，注意字符样式名称需与JS中styles数组值严格一致（如 "bold" → InDesign中名为 "Bold" 的字符样式）。

该方法轻量、标准、可扩展，是处理HTML富文本语义提取的可靠起点。