如何用正则精准匹配innerHTML值中包含source的内容？

我来帮你搞定这个正则匹配的难题——你需要的是只捕获那些innerHTML赋值内容里包含source字符串的语句，而不是随便匹配到innerHTML后面的source，对吧？

为什么你之前的正则会出问题 #

• 用innerHTML=(.*?)source时，非贪婪匹配虽然会尽量少匹配，但它没有限定innerHTML赋值的边界，会跨越多行/多个语句去寻找source，范围完全失控；
• 加了边界的innerHTML=(.*?)(source|[})\]\n])，在没有source的情况下，会直接匹配到后面的边界符号（比如分号、大括号），导致大量误匹配不包含source的innerHTML语句。

解决方案：带正向预查的精准正则 #

我们可以用正向肯定预查确保source存在于当前innerHTML的赋值范围内，同时忽略引号内的边界符号（避免把字符串里的分号当成语句结束），正则表达式如下：

innerHTML=((?:[^;"']|"(?:\\.|[^"])*"|'(?:\\.|[^'])*')*source(?:[^;"']|"(?:\\.|[^"])*"|'(?:\\.|[^'])*')*)(?=[;,}\]\n])

正则拆解：

1. (?=[;,}\]\n])：正向预查，确保匹配到的内容后面跟着语句结束的边界（分号、大括号、换行等），限定innerHTML赋值的范围；
2. (?:[^;"']|"(?:\\.|[^"])*"|'(?:\\.|[^'])*')：匹配除了边界符号和引号之外的内容，或者完整的双引号/单引号字符串（支持转义字符），避免误判引号内的内容；
3. *source*：确保在innerHTML的赋值内容里包含source字符串，前后的匹配规则保证source在当前赋值块内。

实际使用示例（JavaScript） #

const targetRegex = /innerHTML=((?:[^;"']|"(?:\\.|[^"])*"|'(?:\\.|[^'])*')*source(?:[^;"']|"(?:\\.|[^"])*"|'(?:\\.|[^'])*')*)(?=[;,}\]\n])/g;
const codeSnippet = `d.innerHTML=" <link/><table></table><a href='/a'>a</a><input type='checkbox'/>",n=d.getElementsByTagName("*"),r=d.getElementsByTagName("a")[0],!n||!r||!n.length)return{};
d.innerHTML= lala; possibly other stuff; source " <link/><table></table><a href='/a'>a</a><input type='checkbox'/>",n=d.getElementsByTagName("*"),r=d.getElementsByTagName("a")[0],!n||!r||!n.length)return{};`;

let matchResult;
while ((matchResult = targetRegex.exec(codeSnippet)) !== null) {
  console.log("匹配到的有效innerHTML内容：", matchResult[1]);
}

运行这段代码后，只会捕获到第二行包含source的innerHTML赋值内容，完全不会误匹配第一行的语句。

补充说明 #

如果你的代码里innerHTML的赋值包含更复杂的情况（比如模板字符串、函数调用），可以根据实际语法调整正则里的引号匹配规则，但针对你给出的典型场景，这个正则已经足够精准。

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