javascript - 使用 JavaScript 拆分字符串但忽略其中的 HTML 字符

Question

我已经为这个问题摸不着头脑了一段时间，希望有解决方案......

我有一些类似这样的 HTML 字符串:

'<a href="link.com">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Ut lobortis luctus leo, non porta nisi euismod ut. <a href="anotherlink.com">Nulla tristique</a> scelerisque fringilla.'

我需要使用 JavaScript 在一定数量的字符后 chop/拆分文本，不计算链接中的 HTML，但仍会在生成的文本中呈现链接。因此，例如，如果我将其 chop 为 20 个字符，那么我希望显示以下内容，但仍然链接“Lorem ipsum”文本:

Lorem ipsum dolor si

如果我只使用 str.substring(0,20) 那么字符串中的 HTML 字符也会显示，所以我得到:

<a href="link.com">L

它只是呈现为一个超链接的 L:

L

有人对我有什么建议吗？我尝试进行搜索，但找不到合适的答案。

如果有帮助，我可以在 JS 中使用原始非 HTML 文本和完整的 HTML 文本(带链接)。我不想只使用原始文本，因为它不会呈现任何链接。例如，如果我将文本拆分为 200 个字符，那么我希望所有链接仍以 HTML 呈现，但只向用户显示 200 个字符的实际屏幕文本。

希望这是有道理的。非常感谢您的帮助!

约翰

编辑:澄清我想要完成的事情；

我有一篇帖子(文​​本字符串)，其中包含链接。我想计算文本的字符数不包括链接中的 HTML 字符。然后我想 chop 文本以仍然包含 HTML 链接，但只向用户显示 X 个字符。

例如;

'<a href="link.com">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Ut lobortis luctus leo, non porta nisi euismod ut. <a href="anotherlink.com">Nulla tristique</a> scelerisque fringilla.'

当 chop 为 40 个字符时将显示为:

'<a href="link.com">Lorem ipsum</a> dolor sit amet, consectetur adi'

因此它包含链接但只向用户显示 40 个字符的文本。如果我使用 str.substring(0,40) 那么它会在字符数中包含链接并最终显示:

'<a href="link.com">Lorem ipsum</a> dolo'

希望这是有道理的。对造成的困惑表示歉意。

Answer 1

你可以这样使用它:

var s = '<a href="link.com">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Ut lobortis luctus leo, non porta nisi euismod ut. <a href="anotherlink.com">Nulla tristique</a> scelerisque fringilla.'

var div = document.createElement("div");
div.innerHTML = s;
var text = div.textContent || div.innerText;

var substr = text.substring(0, 20);
//=> "Lorem ipsum dolor si"