本文介绍三种可靠方法，使用原生 javascript 移除 `
` 内 `` 标签文本末尾的三个字符（如 `...`），并逐一分析常见错误及修正方案，附可直接运行的代码示例。
”；
在前端开发中，动态注入的内容（如 CMS 或 API 返回的标题）常意外携带末尾省略号（...），影响 UI 一致性与语义准确性。虽然 CSS 的 text-overflow: ellipsis 是推荐的视觉截断方式，但若后端已硬编码 ...，则需用 JavaScript 清理。关键在于：必须显式赋值回 DOM 属性（如 innerHTML 或 textContent），仅调用 .replace() 或 .slice() 不会自动更新页面内容。
以下是三种经过验证的解决方案，按推荐度排序：
✅ 方案一：精准匹配并替换（推荐）
适用于仅需移除末尾 ...，且不破坏 HTML 结构的场景（例如 中无内联标签）：
document.querySelectorAll('.item-title-container a').forEach(link => {
link.textContent = link.textContent.replace(/\.\.\.$/, '');
});✅ 优点：正则 \.\.\.$ 确保只匹配行尾三个点；使用 textContent 避免 HTML 解析风险；支持多个匹配项。 ⚠️ 注意：若 内含子元素（如 ），请改用 innerHTML 并谨慎处理（见方案二）。
✅ 方案二：安全替换 innerHTML（兼容 HTML 子节点）
当链接内容可能含富文本时，优先操作 innerHTML，但需确保只修改文本节点：
立即学习“Java免费学习笔记（深入）
document.querySelectorAll('.item-title-container a').forEach(link => {
// 仅对纯文本子节点操作，避免误删 HTML 标签
if (link.childNodes.length === 1 && link.firstChild.nodeType === Node.TEXT_NODE) {
link.innerHTML = link.innerHTML.replace(/\.\.\.$/, '');
}
});✅ 方案三：通用截断（移除末尾 3 字符）
若确定所有目标文本均以 ... 结尾且无其他干扰，可用字符串截断：
document.querySelectorAll('.item-title-container a').forEach(link => {
const text = link.textContent;
link.textContent = text.length > 3 ? text.slice(0, -3) : text;
});✅ 优点：逻辑简单；自动防御空字符串或短文本。
⚠️ 注意：slice(0, -3) 会无条件删除最后 3 字符，若原文本末尾是 .. 或 .... 将导致结果异常，建议配合正则使用。
❌ 常见错误解析
-
错误写法：element.innerHTML.replace('...', '')
→ 未赋值回 innerHTML，字符串操作结果被丢弃。 -
错误写法：document.getElementsByClassName(...).innerHTML
→ getElementsByClassName 返回 HTMLCollection（类数组），需索引访问（如 [0]）或用 querySelectorAll。 -
错误写法：直接修改 str = element.innerHTML; str = str.slice(...)
→ str 是副本，修改它不会影响 DOM，必须执行 element.innerHTML = str。
最终建议
将以下代码放入
此方案简洁、安全、可扩展，兼顾可读性与健壮性。
