JavaScript 正则表达式：查找标签并获取一些属性值答案

【问题标题】：JavaScript regex: Find a tag and get some attribute valuesJavaScript 正则表达式：查找标签并获取一些属性值
【发布时间】：2016-01-25 14:04:29
【问题描述】：

我需要按类和一些属性值捕获一个 html 标记。

我已经解决了第一部分，按类捕获标签（querySelector 应该类似于：'input.hashtag'）：

<input type="text" value="#tag3" notified="true" class="label-primary hashtag">

所以，我正在使用这个正则表达式：

/(?=<input[^>]+(?=[\s+class=\"]hashtag[\s+\"]).+)([^>]+>)/g

你可以在这里查看测试https://regex101.com/r/zY4sH9/6

我还需要捕获属性值：value 和 nofified，最终得到：

匹配1 <input type="text" value="#tag3" notified="true" class="label-primary hashtag">
匹配2#tag
match3 true

【问题讨论】：

为什么？最好使用像jQuery这样的像样的库@
因为它会与一些嘈杂的代码混合在一起，并且 jquery 之类的解析器无法正确匹配... :(

标签： javascript regex pattern-matching match

【解决方案1】：

您说您已经在使用 .querySelector() 方法，因此我建议您避免使用正则表达式并使用原生 DOM 方法。

var element = document.querySelector('input.hashtag'),
    value = element.value,
    notified = element.getAttribute('notified');

类似地，如果你想选择一个input 元素，它有一个.hashtag 类和 value/notified 属性，那么你可以简单地使用两个属性选择器input.hashtag[value][notified] ：

var element = document.querySelector('input.hashtag[value][notified]'),
    value = element.value,
    notified = element.getAttribute('notified');

但是，如果您需要使用正则表达式，以下将捕获 value 和 notified 属性的值不管顺序（因为正在使用正向前瞻）：

/(<input(?=[^>]*[\s+class=\"]hashtag[\s+\"])(?=[^>]*value=\"([^"]+)\")(?=[^>]*?notified=\"([^"]+)\")[^>]*\>)/

Updated Example

我只是根据你现有的表达方式构建的，所以我不需要解释第一部分。

(?=[^>]*value=\"([^"]+)\") - 在零个或多个非> 字符之后使用捕获组匹配value 属性值的正向前瞻。
(?=[^>]*?notified=\"([^"]+)\") - 在零个或多个非> 字符之后使用捕获组匹配notified 属性值的正向前瞻。

捕获组：

第 1 组 - <input type="text" value="#tag3" notified="true" class="label-primary hashtag">

第 2 组 - #tag3

第 3 组 - true

【讨论】：

【解决方案2】：

.classname 是一个类选择器，[propertyname=value] 是一个值选择器，所以你可以这样做：

document.querySelectorAll('input.hashtag[notified=true]')

【讨论】：

【解决方案3】：

Josh 解决了我的问题，这就是为什么：

var reg = /(<input(?=[^>]*[\s+class=\"]hashtag[\s+\"])(?=[^>]*value=\"([^"]+)\")(?=[^>]*?notified=\"([^"]+)\")[^>]*\>)/gi;

string.replace(reg, '[$2]($3)');

// prints [#tag3](true)

谢谢老哥！

【讨论】：