从元素中分离多行文本

Posted 2023-03-08

【中文标题】从元素中分离多行文本

【英文标题】：Separate multi-line text from an element

【发布时间】：2019-06-01 14:01:33

【问题描述】：

我在开发者控制台中有一个如下所示的元素：

<span>
  "Total Items: "
  "10"
</span>

我只想从中取出第二个字符串（“10”），但textContent、innerText、outerText、innerhtml 和 outerHTML 都将值连接成一个字符串（没有换行符）。

如何检测原始 HTML 中的拆分位置？

我使用的是 javascript (Node.js)，所以 JQuery 或 Cheerio 解决方案对我有用。

【参考方案1】：

这取决于您使用的是什么中断，但请尝试选择内部 html 并将其拆分为中断本身

var splitString = $("span")[0].innerHTML.split("\n")
var secondLine = splitString[1]

【讨论】：

这不起作用，因为innerHTML 不包含'\n'。我不知道是什么导致开发者控制台按原样显示...

@MikeMiller 它不必有 /n，它可以有一个箭头之类的东西，你能张贴一个屏幕或准确粘贴 innerHTML 中的内容

【参考方案2】：

如果您没有任何换行符，您可以使用 RegEx 进行拆分：

myString.split(/"(.*?)"/g)

然后得到第二个值。

【讨论】：

html 没有引号。它只是字符串“Total items: 10”，中间没有换行符或任何内容。我不知道是什么导致开发者控制台显示它。

: 和 trim() 的拆分。 "Total items: 10".split(':')[1].trim()

但文本并不总是这样。它们本质上是两个随机字符串，在开发者控制台中总是用换行符分隔，但显然不是在原始 html 中。我还没有看到原始的html；它是由 JavaScript 生成的，所以它不在“查看源代码”中。我只在开发者控制台中看到过，这似乎是这个神秘换行符唯一出现的地方。

您需要找到一个锚点或每次生成文本时它都保持不变的东西，否则我看不出您如何预测拆分位置。例如，如果您知道每次只想捕获数字（例如 10），只需使用正则表达式来匹配该恒定行为