本文介绍如何使用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">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/875" title="百度GBI"><img
src="https://img.php.cn/upload/ai_manual/001/503/042/68b6d54b42fe6818.png" alt="百度GBI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/875" title="百度GBI">百度GBI</a>
<p>百度GBI-你的大模型商业分析助手</p>
</div>
<a href="/ai/875" title="百度GBI" 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富文本语义提取的可靠起点。
