在前端开发中，动态渲染的内容经常会携带一些不需要的括号，比如接口返回的文本中包含的冗余括号，或者用户输入时误加的括号，而Span元素作为常用的行内文本容器，经常需要对其内部文本进行清理操作。移除Span元素里的括号可以通过多种JavaScript方案实现，不同方案适配不同的场景需求。
基础实现：选取Span并替换括号
最基础的思路是先通过DOM方法选中目标Span元素，获取其文本内容后使用字符串替换方法移除括号，再把处理后的文本重新赋值给Span元素。这种方式适合处理单个或者少量明确的Span元素。
核心代码示例
// 选中id为targetSpan的Span元素
const spanEle = document.getElementById('targetSpan');
if (spanEle) {
// 获取当前Span的文本内容
let textContent = spanEle.textContent;
// 使用正则替换所有类型的括号：中文括号、英文圆括号、方括号、花括号
const processedText = textContent.replace(/[()（）[]【】{}（）]/g, '');
// 将处理后的文本重新赋值给Span
spanEle.textContent = processedText;
}
批量处理多个Span元素
如果页面中有多个需要清理括号的Span元素，可以通过选择器批量获取元素，再遍历处理，避免重复编写单个元素的操作逻辑。
批量处理代码实现
// 选中所有class为needClean的Span元素
const spanList = document.querySelectorAll('span.needClean');
// 遍历所有选中的Span元素
spanList.forEach(spanItem => {
// 获取元素文本内容
const rawText = spanItem.textContent;
// 正则替换所有括号，g表示全局匹配
const cleanText = rawText.replace(/[()（）[]【】{}《》]/g, '');
// 赋值回去
spanItem.textContent = cleanText;
});
处理动态新增的Span元素
当Span元素是动态添加到页面中的，比如通过接口请求后渲染的内容，上面的静态选取方式可能无法生效，这时候可以结合MutationObserver监听DOM变化，在元素新增时自动处理括号。
动态监听实现代码
// 选择需要监听的DOM节点，这里监听整个document body
const targetNode = document.body;
// 配置观察选项：子节点变化、子树变化
const config = { childList: true, subtree: true };
// 创建观察者实例
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
// 遍历新增的节点
mutation.addedNodes.forEach((node) => {
// 判断新增节点是否是Span元素
if (node.nodeType === 1 && node.tagName.toLowerCase() === 'span') {
const rawText = node.textContent;
const cleanText = rawText.replace(/[()（）[]【】{}《》]/g, '');
node.textContent = cleanText;
}
// 如果新增节点包含子Span，也需要处理
if (node.nodeType === 1) {
const childSpans = node.querySelectorAll('span');
childSpans.forEach(spanItem => {
const rawText = spanItem.textContent;
const cleanText = rawText.replace(/[()（）[]【】{}《》]/g, '');
spanItem.textContent = cleanText;
});
}
});
});
});
// 开始观察目标节点
observer.observe(targetNode, config);
正则表达式说明
上面的代码中使用的正则表达式/[()（）[]【】{}《》]/g可以匹配常见的各类括号，不同括号的作用如下：
()：匹配英文圆括号（）：匹配中文圆括号[]：匹配英文方括号【】：匹配中文方括号{}：匹配英文花括号《》：匹配中文书名号，也属于常见需要清理的括号类符号g：全局匹配标志，确保文本中所有符合条件的括号都会被替换，而不是只替换第一个
性能优化建议
如果页面中需要处理的Span元素数量很多，或者动态新增频率很高，可以参考以下优化技巧：
- 尽量缩小DOM选择的范围，比如只监听内容区域的DOM变化，而不是整个body，减少不必要的遍历
- 如果括号类型固定，可以简化正则表达式，减少匹配的计算量
- 对于批量静态元素，可以在页面加载完成后一次性处理，而不是每次操作都重新选取元素
- 如果文本内容很长，可以先判断文本中是否包含括号，再决定是否执行替换操作，避免无意义的字符串处理
注意事项
在使用textContent获取Span内容时，会忽略元素内部的所有HTML标签，只获取纯文本，如果需要保留Span内部的子标签结构，可以使用innerHTML获取内容，但是需要处理标签内的括号时不破坏标签结构，这种情况需要更复杂的解析逻辑，避免误替换标签属性里的括号。另外，正则替换只会处理文本内容，不会影响Span元素本身的属性或者其他DOM结构。
JavaScriptHTML_Span正则替换DOM操作字符串处理修改时间：2026-06-26 17:06:33