Ruby's Louvre

每天学习一点点算法

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

className的高效匹配

在匹配类时,jQuery用于一种相对笨拙的方法,无论是目标节点的类名,还是表达式都要进行处理才能用。

match = " " + match[1].replace(/\\/g, "") + " ";
for (var i = 0, elem;(elem = curLoop[i]) != null; i++) {
    if ((elem.className && (" " + elem.className + " ").replace(/[\t\n\r]/g, " ").indexOf(match) >= 0)) {
        //*******************
    }
}

如果是match为.aaa还好,只用进行一次过滤,如果match为.aaa.bbb呢?!那么有没有更快的方法呢?有的。我们需要构造一个强大的正则出来,让它能同时匹配我们所需要的类名,可能是一个,也可能是多个,并且不分次序。拜群里的高手所赐了,这正则很快就解决了(我为我这个强大的智囊团而骄傲,从此不用上51js,javaeye,blueidea了……)。

<ul>
  <li class="aaa bbb">符合</li>
  <li class="bbb aaa">符合</li>
  <li class="aaa ccc bbb">符合</li>
  <li class="aaa">不符合 </li>
  <li class="bbb">不符合 </li>
</ul>

比如,我们想匹配同时拥有aaa与bbb的这些LI元素,就要只需要把表达式转换成正则,直接test验证就行了,无需再对元素上的className进行处理。

var src = ""
      var escape = /([-.*+?^${}()|[\]\/\\])/g
      "aaa.bbb".replace(/[^.]+/g,function($){
        src += '(?=[\\s\\S]*(?:^|\\s)'+$.replace(escape, '\\$1')+'(?:\\s|$))'
      })
      var reg = new RegExp(src);
      var t1 = "aaa bbb"
      var t2 = "bbb aaa"
      var t3 = "aaa ccc bbb"
      var t4 = "aaa"
      var t5 = "bbb"
      alert(reg.test(t1))//true
      alert(reg.test(t2))//true
      alert(reg.test(t3))//true
      alert(reg.test(t4))//false
      alert(reg.test(t5))//false

2011.1.27更好的方案

var src = ".aaa.bbb".replace(/([\/\[\]\:])/g,'\\$1')//替换className中允许的特殊字符
.replace(/\.([^.]+)/g,'(?=[\\s\\S]*(?:^|\\s)$1(?:\\s|$))');//匹配
var reg = new RegExp('^'+src);//加了^就匹配开头,不然发现不匹配还要找其他n个位置(n是字符串长度) by abcd
var t1 = "aaa bbb"
var t2 = "bbb aaa"
var t3 = "aaa ccc bbb"
var t4 = "aaa"
var t5 = "bbb"
alert(reg.test(t1))//true
alert(reg.test(t2))//true
alert(reg.test(t3))//true
alert(reg.test(t4))//false
alert(reg.test(t5))//false

如果您觉得此文有帮助,可以打赏点钱给我支付宝1669866773@qq.com ,或扫描二维码

posted on   司徒正美  阅读(3324)  评论(3编辑  收藏  举报

编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示