使用正则表达式定位 HTML 标记中的属性答案

【问题标题】：Target an attribute within HTML tags with regex使用正则表达式定位 HTML 标记中的属性
【发布时间】：2016-07-09 11:51:00
【问题描述】：

我正在寻找一个正则表达式，它以任何名为 attrName 的 HTML 属性为目标，以便我可以用 attr 替换它，但只能在 <Highlight></Highlight> 标记内。

我要定位的块的一个例子是：

<Highlight attrName="html">
 {'
   <div attrName="input action">
   \n\t<input type="text" name="name" placeholder="Search..."/>
   \n\t<a attrName="button outlined">Search</a>
   \n</div>
 '}
</Highlight>

到目前为止，我只是想出了正则表达式<Highlight\s*(attrName)\s*，但它只针对<Highlight attrName

【问题讨论】：

将 HTML 解析为 DOM 元素，不要使用正则表达式。
为什么，哦，为什么使用正则表达式？ It never stops.
你到底是什么意思？我只是在我的代码编辑器中使用查找和替换正则表达式功能
{' 语法是什么？你在使用一些模板库吗？
在我的代码编辑器中查找和替换正则表达式功能 - 什么是代码编辑器？

标签： javascript html regex atom-editor

【解决方案1】：

除了通过正则表达式解析此类代码并不总是一个好主意之外，您可能需要比 Atom 编辑器提供的更强大的正则表达式风格。支持PCRE的Notepad++怎么样。

在这里您可以使用\G anchor to chain matches 从开始或某一点开始。

(?s)(?:<Hi[^>]*>|\G(?!^))(?:(?!</Hi).)*?\KattrName

(?s)flag 是为了让点也匹配换行符。
(?:<Hi[^>]*>|\G(?!^)) non capturing group 中的第一部分是设置匹配开始的位置。如果没有 (?!^) 否定 lookahead \G 也会匹配字符串的开头。
(?:(?!</Hi).)*? 第二部分匹配任意数量的字符，同时不跳过</Hi，通过使用负前瞻和reset the match by use of \K 在attrName 之前。

Here is the demo at regex101

【讨论】：

再次感谢，也很好的解释！

【解决方案2】：

这将找到属性：(?<=<[^<]+)attrName(?=\s*=[^>]+>)

这将找到出现该属性的 HTML 标记：<[^<]+attrName\s*=[^>]+>

【讨论】：