本文介绍如何在保留 html 标签结构的前提下，按「纯文本内容长度」（而非总字符串长度）安全截断 html 字符串，并支持优先截断至句末标点（如英文句号），避免在标签中间或单词中间硬切，适用于 jquery 环境或纯 javascript 场景。
本文介绍如何在保留 html 标签结构的前提下，按「纯文本内容长度」（而非总字符串长度）安全截断 html 字符串，并支持优先截断至句末标点（如英文句号），避免在标签中间或单词中间硬切，适用于 jquery 环境或纯 javascript 场景。
在前端开发中，常需对富文本（含 HTML 标签）做摘要显示——例如新闻列表、评论预览等场景。但直接使用 substring() 或 slice() 会破坏标签结构，导致页面渲染异常；而仅用 textContent 又会丢失所有格式。理想方案应满足三点：
✅ 仅统计非标签部分的可见字符（即
、 等标签内的文字）；
✅ 截断点优先落在句末标点（如 .）之后，提升可读性；
✅ 截断后HTML 结构仍合法（标签成对、不嵌套断裂）。
以下提供一个轻量、健壮、无依赖的 JavaScript 实现（兼容 jQuery 环境，亦可独立使用）：
function truncateHtml(html, maxLength = 50) {
let result = '';
let tempText = ''; // 缓存当前待提交的纯文本段（不含标签）
let tagOpen = false; // 是否处于 HTML 标签内
let visibleCount = 0; // 已计入的可见字符数（即非标签内容）
// 第一遍：逐字符解析，构建带句点截断的主结果
for (const char of html) {
if (char === '<') {
tagOpen = true;
tempText += char;
} else if (char === '>') {
tagOpen = false;
tempText += char;
} else if (tagOpen) {
tempText += char;
} else if (char === '.' && visibleCount < maxLength) {
// 遇到句号且未超限 → 提交整段（含句号）到结果
result += tempText + '.';
tempText = '';
visibleCount++;
} else if (visibleCount < maxLength) {
tempText += char;
visibleCount++;
}
}
// 第二遍：处理剩余未提交的 tempText 中的 HTML 标签（仅补全闭合标签，不新增文本）
// 这确保最终 HTML 结构完整（如开头有 <p> 但未闭合，则不补；但若已有 </p> 则保留）
tagOpen = false;
for (const char of tempText) {
if (char === '<') {
tagOpen = true;
result += char;
} else if (char === '>') {
tagOpen = false;
result += char;
} else if (tagOpen) {
result += char;
}
// 非标签、非句点的纯文本字符被丢弃（已超限）
}
return result;
}使用示例：
const html = '<p>This is a test message</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>This is a test message.<p>This is a test <a href="#">message.</a> </p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1066" title="Lemonaid"><img
src="https://img.php.cn/upload/ai_manual/001/503/042/68b6c98fcb1c3643.png" alt="Lemonaid" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1066" title="Lemonaid">Lemonaid</a>
<p>AI音乐生成工具，在音乐领域掀起人工智能革命</p>
</div>
<a href="/ai/1066" title="Lemonaid" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>';
console.log(truncateHtml(html, 50));
// 输出："<p>This is a test message</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>This is a test message."关键设计说明：
- ✅ 双阶段处理：第一阶段捕获所有句点前的有效文本；第二阶段仅透传残留标签，杜绝非法截断；
- ✅ 标签状态机：通过 tagOpen 布尔值精确识别 <...> 区域，完全规避正则误匹配（如 、
等边界情况）；
- ✅ 零 DOM 操作：纯字符串处理，性能高、无浏览器环境依赖，可服务端（Node.js）复用；
- ⚠️ 注意事项：
- 本方案默认以英文句号 . 为句子分界符；如需支持 !、? 或中文句号 。，可扩展判断逻辑：if (['.', '!', '?', '。'].includes(char) && visibleCount
- 不自动修复嵌套错误（如
text 被截断），因原始 HTML 应保证结构正确；
- 若需 jQuery 封装，可添加为工具方法：$.fn.truncateHtml = function(maxLength) { return this.map((_, el) => truncateHtml(el.innerHTML, maxLength)); };
该方案平衡了准确性、可维护性与执行效率，是处理 HTML 摘要截断问题的推荐实践。
