如何使用JavaScript移除HTML中的Angular双花括号及内部内容？

我有一段包含Angular变量（{{ variable }}）格式的HTML代码，需要用JavaScript移除所有双花括号（{{ }}）及其内部的文本内容。

输入字符串

"<p>this is some{{name}}</p><div>some text {{ secondvariable1 }}</div> <div>some deferent text {{ secondvariable2 }}</div>"

期望输出字符串

"<p>this is some</p><div>some text </div> <div>some deferent text </div>"

解决方法 #

用JavaScript的replace()方法结合正则表达式就能实现，正则会匹配所有{{ }}包裹的内容（包括括号内的空格和变量名），并替换为空字符串：

// 输入的HTML字符串
const htmlInput = "<p>this is some{{name}}</p><div>some text {{ secondvariable1 }}</div> <div>some deferent text {{ secondvariable2 }}</div>";
// 执行替换操作
const cleanedHtml = htmlInput.replace(/{{\s*.*?\s*}}/g, '');
// 输出结果
console.log(cleanedHtml);

正则表达式说明 #

• {{：匹配开头的双花括号
• \s*：匹配括号内部前后可能存在的任意空格
• .*?：非贪婪模式匹配括号内的任意内容，避免误匹配多个括号之间的全部文本
• }}：匹配结尾的双花括号
• g：全局匹配标志，确保替换所有符合规则的内容

运行上述代码后，就能得到清理后的目标HTML字符串。

内容的提问来源于stack exchange，提问作者Vivek Kumar Shukla