JavaScript 在每个标签上分割包含 HTML 的字符串

Question

所以我有下面的字符串我试图解析。var text = '<div class="class" style="color:#666;font-size:12px"><strong style="font-size:12px;color:#123;font-weight:bold;">XXXXXXX</strong><br /><span>YYYYYYYYYYYYYYYYYY</span></div><div class="classL" style="color:#456;text-align:right;"><a style="color:#789" href="./abc/?id=1">ZZZZZZZ</a></div>'我认为它需要分开，因为它会像这样写：<div class="class" style="color:#666;font-size:12px"><strong style="font-size:12px;color:#123;font-weight:bold;">XXXXXXX</strong><br /><span>YYYYYYYYYYYYYYYYYY</span></div><div class="classL" style="color:#456;text-align:right;"><a style="color:#789" href="./abc/?id=1">ZZZZZZZ</a></div>然后每一行都需要关闭它的标签，这样它就完整了：<div class="class" style="color:#666;font-size:12px"></div><strong style="font-size:12px;color:#123;font-weight:bold;">XXXXXXX</strong><br /><span>YYYYYYYYYYYYYYYYYY</span><div class="classL" style="color:#456;text-align:right;"></div><a style="color:#789" href="./abc/?id=1">ZZZZZZZ</a>最后我想使用如下所示的方式获取每一行的文本：jQuery(text[i]).text();最后要这样：XXXXXXXYYYYYYYYYYYYYYYYYYZZZZZZZ另外，如果可以保留超链接，./abc/?id=1那就太好了。尝试最初我尝试执行以下操作，但意识到即使我可以将用于“分割”的部分添加回字符串，我也无法最终使每一行都是语法正确的 HTML，这意味着我无法使用 jQuery select文本功能。// Split Text Onlyvar textArraySplit = name.split(">");var textArray = new Array();for(var j = 0; j < textArraySplit.length-1; j++) {  textArray.push(textArraySplit[j] + ">");}

Answer 1

您可以尝试下面的代码。

var text = '<div class="class" style="color:#666;font-size:12px"><strong style="font-size:12px;color:#123;font-weight:bold;">XXXXXXX</strong><br /><span>YYYYYYYYYYYYYYYYYY</span></div><div class="classL" style="color:#456;text-align:right;"><a style="color:#789" href="./abc/?id=1">ZZZZZZZ</a></div>'

let parser = new DOMParser()

let _document = parser.parseFromString(text, "text/html")

let _body = _document.getElementsByTagName("body")[0]

let rec = (children) => {

  for (let i=0; i<children.length ; i++) {

    let child = children[i]

    if (child.children.length) {

      rec(child.children)

    }

    else if(child.innerText.length > 0) {

    console.log(child.innerText)

    }

  }

}

rec(_body.children)

Answer 2

您最好的选择可能是创建一个 DOM 元素并提取文本。