匹配正則 巧用CSS屬性值正則匹配選擇器

2021-10-14 18:08:51 字數 1068 閱讀 4867

屬性值正則匹配選擇器包括下面3種:

[attr^="val"]

[attr$="val"]

[attr*="val"]

這3種屬性選擇器是字元匹配,而非單詞匹配。其中,尖角符號^、美元符號$以及星號*都是正規表示式中的特殊識別符號,分別表示前匹配、後匹配和任意匹配。

利用上述三種選擇器可以愉快的實現在鏈結前面新增小圖示的效果,而更酷的是可以實現列表搜尋過濾,太酷了!

利用[attr^="val"]前匹配選擇器可以判斷元素的鏈結位址型別,以用來顯示對應的小圖示。顯示超連結的小圖示的樣式如下:

效果

而利用[attr$="val"]後匹配選擇器則可以實現顯示檔案型別小圖示。css如下:

效果如下

我們可以借助屬性選擇器來輔助我們實現搜尋過濾效果,如通訊錄、城市列表,這樣做效能高,**少。

html結構如下

此時,當我們在輸入框種輸入內容的時候,只要根據輸入內容動態建立一段css**就可以實現搜尋匹配效果了,無需自己寫**進行匹配驗證。

最終效果如下

是不是太酷了!

js 正則匹配key值 js 正則匹配 小結

js的正規表示式 rge.test str 檢驗目標物件中是否包含匹配模式,並相應的返回true或false rge.source str.search rge 將返回乙個整數值,指明這個匹配距離字串開始的偏移位置。如果沒有找到匹配,則返回 1 str.replace re,function 替換匹...

excel實現正則一一匹配功能

function regexptest patrn,col,tocol dim regex,myrange,i,c,matches,match,str 建立變數。set regex createobject vbscript.regexp 建立正規表示式。regex.pattern patrn 設定...

正則2 匹配開頭結尾,分組轉義

匹配結尾開頭 簡單判斷email,轉義 分組import re defmain names age age loge age1 a age age 1 age a 123 for name in names ret re.match r a za z a za z0 9 name if ret pr...