如何使用jQuery/JS匹配字符串文本并为大括号变量包裹span标签

方法1：前端JavaScript直接处理 #

通过正则匹配所有双大括号包裹的变量，全局替换为加了span标签的格式即可：

// 替换前先拿到原始HTML字符串
const rawHtml = `<p>Lorem ipsum dolor sit amet, {{ context_1  }} consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. {{ context_2 }} Ut enim ad minim veniam.<p>`;

// 正则规则支持匹配变量名前后的空白字符，适配嵌套属性如{{ user.info.name }}的场景
const processedHtml = rawHtml.replace(/{{\s*[\w.]+\s*}}/g, match => `<span>${match}</span>`);

// 直接输出结果或者插入到DOM中使用即可
console.log(processedHtml);

正则说明：

• {{ 匹配变量开头的双大括号
• \s* 匹配变量名前后可能存在的任意数量空白
• [\w.]+ 匹配变量名（支持字母、数字、下划线、点）
• }} 匹配变量结尾的双大括号
• g 开启全局匹配，一次性处理所有符合规则的变量

方法2：服务端/其他语言处理 #

逻辑和前端完全一致，只要对应语言支持正则替换即可，示例Python代码如下：

import re

raw_html = '''<p>Lorem ipsum dolor sit amet, {{ context_1  }} consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. {{ context_2 }} Ut enim ad minim veniam.<p>'''

processed_html = re.sub(r'{{\s*[\w.]+\s*}}', lambda x: f'<span>{x.group()}</span>', raw_html)
print(processed_html)

注意事项 #

如果HTML内容已经挂载到页面DOM上，不要直接用innerHTML替换整个区域，会导致原有绑定的事件失效，这种场景建议先处理原始模板字符串再渲染，或者通过DOM遍历仅处理文本节点内容。

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