在每个标签上包含 HTML 的 JavaScript 拆分字符串答案

【问题标题】：JavaScript Split String Containing HTML On Each Tag在每个标签上包含 HTML 的 JavaScript 拆分字符串
【发布时间】：2020-03-19 03:05:02
【问题描述】：

所以我有下面要解析的字符串。

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 选择文本功能。

// Split Text Only
var textArraySplit = name.split(">");
var textArray = new Array();
for(var j = 0; j < textArraySplit.length-1; j++) {
  textArray.push(textArraySplit[j] + ">");
}

【问题讨论】：

标签： javascript html

【解决方案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)

【讨论】：

【解决方案2】：

您最好的选择可能是创建一个 DOM 元素并提取文本。看到这个答案：Extract the text out of HTML string using JavaScript

【讨论】：