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) => { 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 元素并提取文本。 请参阅此答案： 使用 JavaScript 从 HTML 字符串中提取文本