试图从html数据中获取具有属性的文本

Question

我试图从HTML中获取具有属性的文本(粗体、带下划线、斜体、上标等(，但我很难使用嵌套属性(如<b> Lorem <u> Ipsum </u></b>，在这种情况下，Lorem应该是粗体，Ipsum应该是粗体和带下划线(。

示例数据

<p> Normal<b>Bold</b> <b>Bold<u>Underlined</u></b> <b><i>Bold Italic</i></b><p/>

我需要在Indesign Script中使用这些文本，并且我需要为这些属性指定字符样式我可以使用PHP或Javascript的任何工具或技术吗

Answer 1

请尝试在要运行JS代码的环境中是否提供DOMParser。

这将解析html字符串，并输出节点及其文本的树结构。

const htmlString = '<p> Normal<b>Bold</b> <b>Bold<u>Underlined</u></b> <b><i>Bold Italic</i></b><p/>';
const htmlElement = (new DOMParser().parseFromString(htmlString, 'text/html')).firstChild.childNodes[1].firstChild;
const tree = convertDomToArray(htmlElement);
console.log(tree);

function convertDomToArray(element) {
if (element.nodeName === '#text') {
return element.nodeValue;
}

let children = [];
for (let childElement of element.childNodes) {
children.push(convertDomToArray(childElement));
}

let output = {};
output[element.nodeName] = children;

return output;
}