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

这件事我已经琢磨了一段时间了，我希望有一个解决办法

我有一些类似的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.'

如果我只使用str.substring（0,20），那么字符串中的HTML字符也会显示出来，因此我得到：

<a href="link.com">L

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

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

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

约翰

编辑：阐明我试图实现的目标

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

“多洛”

---

希望这是有道理的。抱歉造成混淆。

您可以这样使用它：

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"

var s='dolor sit amet，concetetur adipising elit。这是利奥港，非利奥港。斯克利里克·弗林利亚。”
var div=document.createElement（“div”）；
div.innerHTML=s；
var text=div.textContent | | div.innerText；
var substr=text.substring（0,20）；
//=>“Lorem ipsum dolor si”

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

1.用空格分割原始字符串 2.得到第一个（班次）或最后一个（流行音乐）

var longString=“Lorem ipsum dolor sit amet”

shortString=longString.split（“”.shift（）；-->//洛勒姆

---

你想干什么？你为什么要这样做？在文本放到页面上之前，是否可以截断文本？这将是一种更简洁的方法。通常的过程是创建一个临时元素，将字符串附加到新创建的元素，使用一些DOM操作方法，并在需要时将被操作的内容转换回字符串。为了进一步解释，我试图截断社交媒体帖子中的一个文本字符串，这样它只显示前X个字符，然后在末尾包含一个“查看更多”按钮，该按钮会展开文本以显示所有内容。我可以在文本进入页面之前将其截断，但我需要文本的简短版本和完整版本，两个版本中的链接都保持不变。下面有几个不错的答案。请不要试图用；）来做这件事。谢谢anubhava，我不认为这会保留文本中的链接。我编辑了我的文章以作进一步解释，但我试图在文本中保留链接，但只是在屏幕上向用户显示20个字符的文本，链接出现时仍然保持不变。此代码仅用于向用户显示非html的20个字符。你总是有你的原始HTML与链接做休息。我明白，这是行不通的，但不幸的是，我需要在短文本内也呈现链接，因为短文本可能有几百个字符长。要截断的字符数是可变的，可能在20到500之间，因此我需要链接仍然存在。您自己的示例正在尝试剥离链接，或者我没有理解正确？我一直在使用str.substring（0,20），但它无法解决问题。我需要截断文本以包含链接，但在计算要截断的字符时不计算链接中的字符数。我将编辑我的原始帖子以再次解释。谢谢Anh，但字符串结构不一致，将包含各种链接和字符。

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

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"