如何使用原生JavaScript安全截断含HTML标签的文本（无需jQuery）

不要用正则表达式剥离HTML标签，这类写法永远覆盖不全所有边界情况（比如标签属性中包含尖括号、HTML注释、特殊格式的自闭合标签、实体编码字符等场景都会出现匹配误差）。最稳妥的实现方式是直接调用原生的HTML解析能力提取纯文本，再做截断，解析逻辑和浏览器渲染页面的逻辑完全一致，不存在匹配偏差。

实现代码 #

function truncateHtmlText(htmlString, maxLength = 15, showEllipsis = true) {
  // 调用原生DOMParser解析HTML字符串
  const parser = new DOMParser();
  const parsedDoc = parser.parseFromString(htmlString, 'text/html');
  // 直接提取解析后DOM的纯文本内容，自动剥离所有HTML标签
  let plainText = parsedDoc.body.textContent ?? '';
  // 可选：将连续换行、多个空白字符合并为单个空格，和页面实际展示的文本效果对齐
  plainText = plainText.replace(/\s+/g, ' ').trim();

  // 文本长度未超过限制直接返回原文本
  if (plainText.length <= maxLength) return plainText;
  // 截断到指定长度，按需追加省略号
  const truncatedContent = plainText.slice(0, maxLength);
  return showEllipsis ? `${truncatedContent}...` : truncatedContent;
}

// 传入原始字符串测试
const rawContent = `Hello world!<br />this is a new day for us<br /><br />lorem ipsum dolor and more long string here`;
console.log(truncateHtmlText(rawContent, 15));
// 输出：Hello world! th...

注意事项 #

• 上述代码为浏览器环境原生实现，无任何第三方依赖。
• 如果需要在Node.js环境运行，不要自行编写正则处理HTML，引入成熟的HTML解析库（如htmlparser2），按照「解析HTML -> 提取纯文本 -> 截断」的相同逻辑实现即可。
• 核心原则：永远不要用正则处理结构化的HTML内容，解析工作交给专门的HTML解析器才是可靠方案。

内容的提问来源于stack exchange，提问作者dapidmini