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

// 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元素并提取文本。查看此答案：Extract the text out of HTML string using JavaScript

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

2 个答案: