使用长HTML字符串作为omission参数时Lodash _.truncate返回错误结果

我来帮你捋捋这个问题哈～

首先得明确：_.truncate这个函数从设计初衷来说，是专门处理纯文本的截断工具，它完全不会解析HTML结构。所以如果你把带标签的HTML字符串当成omission传进去，函数只会把它当作普通的字符串来计算长度和拼接，这就很容易出现不符合预期的结果——比如截断后的内容里HTML标签未闭合，或者直接显示出<xxx>这类原始标签文本，而不是你想要的渲染效果。

举个简单例子：假设你设置omission: '<span class="more">...</span>'，_.truncate不会识别这是个HTML标签，它只会把这段字符串的字符数算进截断长度里，最后输出的内容可能会是半拉未闭合的HTML结构，自然就会出现“错误结果”。

那怎么正确处理这种需求呢？给你两个思路：

• 方案一：先转纯文本再处理
  1. 把你要截断的原始HTML字符串转换成纯文本（可以用浏览器的DOMParser，或者专门的HTML转文本工具）；
  2. 用_.truncate处理这个纯文本，得到截断后的纯文本内容；
  3. 最后手动把HTML格式的省略符拼在截断文本后面，再插入到页面中。
• 方案二：换用专门的HTML截断库
  如果你的需求是要保留HTML结构的同时完成截断，那_.truncate肯定满足不了，得找专门处理HTML的截断工具，这类工具会解析标签结构，保证截断后HTML的完整性。

另外你提供的测试代码片段我也贴在这里，方便参考：

var string = "In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the..."

内容的提问来源于stack exchange，提问作者Below the Radar