使用 JavaScript 拆分字符串但忽略其中的 HTML 字符答案

【问题标题】：Splitting a string with JavaScript but ignoring the HTML characters in it使用 JavaScript 拆分字符串但忽略其中的 HTML 字符
【发布时间】：2014-10-09 17:18:58
【问题描述】：

我已经在这个问题上摸索了一段时间，希望在某个地方有解决方案..

我有一些类似的 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 在一定数量的字符后截断/拆分文本，不计算链接中的 HTML，但仍会在结果文本中呈现链接。因此，例如，如果我将其截断为 20 个字符，那么我希望显示以下内容，但仍然链接“Lorem ipsum”文本：

Lorem ipsum dolor si

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

<a href="link.com">L

仅呈现为超链接 L：

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

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

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

约翰

编辑：澄清我要完成的工作；

我有一个包含链接的帖子（文本字符串）。我想计算文本 不包括 链接中的 HTML 字符的字符。然后我想截断文本以仍然 include 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.'

当截断到 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'

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

【问题讨论】：

你想做什么？你为什么要这样做？
是否可以在将文本放入页面之前截断文本？这将是一种更清洁的方法。
通常的过程是创建一个临时元素，将字符串附加到新创建的元素，使用一些 DOM 操作方法，并在需要时将操作的内容转换回字符串。
为了进一步解释，我正在尝试截断社交媒体帖子中的文本字符串，使其仅显示前 X 个字符，然后在末尾包含一个“查看更多”按钮展开文本以显示所有内容。我可以在文本进入页面之前将其截断，但我需要文本的简短版本和完整版本，两个版本中的链接仍然完好无损。
下面有几个很好的答案。请不要尝试使用 regexp 这样做； )。

标签： javascript html regex string substring

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

【讨论】：

感谢 anubhava，但我认为这不会保留文本中的链接。我编辑了我的帖子以进一步解释，但我试图保留文本中的链接，但只在屏幕上向用户显示文本的 20 个字符，链接在出现时仍然完好无损。
此代码仅用于显示非 html 20 个字符以供使用。您始终拥有带有链接的原始 HTML。
我明白，不幸的是，这行不通，因为我也需要在短文本中呈现链接，因为短文本可能有几百个字符长。要截断的字符数是可变的，范围可能从 20 到 500，因此我需要链接仍然存在。
你自己的例子是试图剥离链接或者我不理解它吗？
我一直在使用 str.substring(0,20) 但它并没有解决问题。我需要截断文本以包含链接，但在计算要截断的字符时不计算链接中的字符。我将编辑我的原始帖子以再次解释。

【解决方案2】：

如果您的字符串结构与您显示的一致；那么，这可能会起作用：

1.用空格分割你的原始字符串 2.获取吐出的第一个（shift）或最后一个（pop）

var longString = "Lorem ipsum dolor sit amet";

shortString = longString.split(" ").shift(); --> //Lorem

【讨论】：

谢谢 Anh，但字符串结构不一致，会包含各种链接和字符。