Home Articles

regex如何匹配单个元素(<>)中的重复属性名称

Asked
Viewed 1382 times
1

我正在尝试使用正则表达式来搜索具有重复样式或类属性的元素 . 我只能获得匹配的行,但我想更多地定义与实际元素的匹配(在<>内) . 有人有例子吗?下面是一些HTML,搜索应该只匹配顶部div,因为它有两个样式属性 .

<div style="width:100%;" style="height:100%;">
<div class="thisclass">Inner DIV</div>
<span class="thisstyle">Test Code</span>
</div>

我可以通过使用 <.+(class)=("|').+?\2.+?\1.+> 来获取具有重复属性的所有行,但如果行上有多个括号/元素,则会产生一些误报 .

3 Answers

  • 2

    要防止超过元素的结尾,请使用 [^>]+ 而不是 .+ . [^>] 匹配 > 以外的任何字符 .

    <[^>]+(class)=["'][^>]+?\2[^>]+?\1[^>]+>
    
  • 0

    更新 .

    以下解决方案是通用的 - 它将为您提供标记内的任何重复属性 . 我彻底测试过了:

    <[a-z]++\s++([a-z][-a-z_\d]++(?:\s*+=\s*+(?:(["'])(?:(?!(?<!\\)\2).)*+\2|[-a-z_\d{@#():,*!!\[\]}]++))?+[^-a-z_\d{@#():,*!!\[\]}>]++)*?(([a-z][-a-z_\d]++)(?:\s*+=\s*+(?:(["'])(?:(?!(?<!\\)\5).)*+\5|[-a-z_\d{@#():,*!!\[\]}]++))?+[^-a-z_\d{@#():,*!!\[\]}>]++)*([a-z][-a-z_\d]++(?:\s*+=\s*+(?:(["'])(?:(?!(?<!\\)\7).)*\7|[-a-z_\d{@#():,*!!\[\]}]++))?+[^-a-z_\d{@#():,*!!\[\]}>]++)*?(\4\b(?:\s*+=\s*+(?:(["'])(?:(?!(?<!\\)\9).)*+\9|[-a-z_\d{@#():,*!!\[\]}]++))?+[^-a-z_\d{@#():,*!!\[\]}>]*+)[^>]*>
    

    (对此正则表达式使用 case insensitive 模式)

    它会让你确定,你 correctly capture cases 喜欢:

    • <div style = "font-family:\"Open Sans\"" style= "font-size:2em">

    • <div class='one' width=20 class>

    • <div style="color:white" style=color:black!important>

    捕获组 $3$8 将为您提供属性的第1和第2次出现及其值 .

    在这里以视觉和交互方式看一看 .

    Check regular expression online visually and interactively

    P.S.: 下面解释了正则表达式中 [\w{@#():,*!!\[\]}] 的用法:

    <div rel = {@#():,* !! [[]]}> </ div>:这看起来很奇怪,但这些字符都没有问题,没有浏览器有任何问题 .

    我还在charated列表中添加了短划线“ - ”,可以解释为属性值,并且不会破坏它,因为现代浏览器会以这种方式运行 .

  • 0

    例如,您可以在组1中使用 \sclass\s*=\s*"([^"]+)"[\s\>] ,您将找到属性的所有类名 . 只需在空格上拆分并检查所有值是否都是唯一的 .

    问题在于编写一个始终有效的正则表达式 . 因为正则表达式不是一个html解释器,所以总会出错:假设一个页面有javascript,并且在那里我做了一些奇怪的事情,不知怎的,正则表达式匹配 var class = "test test" ; 没有我的正则表达式火,但它不是一个html类属性 .

    您最好找到一个能够正确解释html的库并定期(因为它可能会慢一点)检查html是否包含双类名称 .

Related