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();

最后要这样：

XXXXXXX

YYYYYYYYYYYYYYYYYY

ZZZZZZZ

另外，如果可以保留超链接，./abc/?id=1那就太好了。

尝试

最初我尝试执行以下操作，但意识到即使我可以将用于“分割”的部分添加回字符串，我也无法最终使每一行都是语法正确的 HTML，这意味着我无法使用 jQuery select文本功能。

// Split Text Only

var 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) => {&nbsp; for (let i=0; i<children.length ; i++) {&nbsp; &nbsp; let child = children[i]&nbsp; &nbsp; if (child.children.length) {&nbsp; &nbsp; &nbsp; rec(child.children)&nbsp; &nbsp; }&nbsp; &nbsp; else if(child.innerText.length > 0) {&nbsp; &nbsp; console.log(child.innerText)&nbsp; &nbsp; }&nbsp; }}rec(_body.children)

Answer 2

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