javascript - Node.js 正则表达式替换复杂 HTML 开放标记中的多个属性

Question

我正在开发一个 Node.js 项目，在这个项目中我们正在搜索一堆 PHP View 文件，并替换一些属性。我正在尝试获取 HTML 开放标记属性值，并替换它们。

基本上，如果这是标签

<tag attr1="[capture ANYTHING inside single/double qoutes]" attr2='[CAPTURE ANYTHING]'></tag>  

我想捕获属性引号内的任何内容。和 [ANYTHING]我的意思是真的任何东西!

示例2:attr="with HTML <br/><b>also been captured</b>"
示例3:attr="with line break style \n or \n\r this is still is part of what should been captured and this line too!"
示例4:attr="a PHP code <?php echo $ThisPHPcodeisInsideTheQoutes?> should be captured as well!"
示例5:title="{{angular?'if inside the attribute': 'it should be acptured as well' }}"

我编写了下一个正则表达式:

/<\w+\s+(:?[\w-]+=(:?"|')(.|[\r\n])*?\2\s*?)>?/g

此正则表达式仅捕获第一个属性。

#regex 分割:

< tag start
\w+ a word, mainly tag name this will force avoiding PHP tags <?php
\s+ a space or multiple sapces <tag attr
(:? a non capturing group1, I want to get Multiple attributes, but capture only the content!
[\w-]+ a word or - for example attr or ng-attr
= the attribute equal sign
(:?"|') a non capturing group2 open quote or double qoutes
(.|[\r\n])*? -- the actual data I am trying to capture, capture everything . or [\r\n] line break\2 - back reference to (:?"|') so well have "[data]" or '[data]'
\s*? - zero or more sapces before the next tag not greedy
) - close of non capturing group1
>? - end of opening tag not greedy

我不明白为什么没有捕获多个属性预先感谢您的帮助

Answer 1

我不明白如何通过单个正则表达式匹配来做到这一点。据我所知，您无法使用反向引用端来匹配多个子模式。

相反，我建议分两步处理 HTML。首先，使用

提取开始标记字符串

/<\w+\s+[\w-]+=("|')(?:.|[\r\n])*?\1\s+.*?>/g

然后返回匹配并使用提取每个属性/值对

/([\w-]+=("|')(?:.|[\r\n])*?\2)/g

此时，您可以拆分第一个“=”以将每个属性与其值分开。

Here is a fiddle implementing what I recommend.您的示例文本应该按照您想要的方式进行解析。