本文共 2512 字，大约阅读时间需要 8 分钟。

之前项目中有一个功能，需要根据图片URL后缀的扩展名匹配相应的图标，当时是用JS的switch case实现的，因为switch case可以进行多对一匹配，而对象key value只能进行一对一匹配。

今天偶然看到CSS也能进行正则匹配，并且专门就是针对这种场景的，这样以后直接用CSS就行了，性能肯定有所提升。

如果还有同学不明白CSS选择器正则匹配，看看下面几个例子应该马上就能明白了。

/* 匹配所有带href属性的标签 */[href] {   padding-left: 18px;}/* 匹配href开头为https或//的标签 */[href^="https"],[href^="//"] {   	background: url("./images/link.png") no-repeat left;}/* 匹配href开头为#的标签 */[href^="#"] {   	background: url("./images/anchor.png") no-repeat left;}/* 匹配手机和邮箱 */[href^="tel:"] {   	background: url("./images/tel.png") no-repeat left;}[href^="mailto:"] {   	background: url("./images/e-mail.png") no-repeat left;}

效果如下：

/* 匹配href属性以.pdf结尾的标签 */[href$=".pdf"] {   	background: url("./images/pdf.png") no repeat left;}/* 匹配href属性以.zip结尾的标签 */[href$=".zip"] {   	background: url("./images/zip.png") no repeat left;}/* 图片链接 */[href$=".png"],[href$=".gif"],[href$=".jpg"],[href$=".jpeg],[href$=".webp"] {   	background: url("./images/image.png") no repeat left;}

效果如下：

1. ^ 表示从字符串开始位置匹配
2. $ 表示从字符串结束位置匹配
3. * 表示字符串任意位置匹配
4. i 表示字符串匹配不区分大小写
5. g 表示字符串全局匹配

[attr="val"] 选择attr属性值只为val的元素<div attr="val"/>

[attr] 选择有attr这个属性的元素（区分大小写） <div attr="val"/> <div attr /> <div attr="val5435454"/>

[attr~="val"] 选择属性为attr，并且属性值包含val单词的元素（区分大小写） <div attr="text val"/> <div attr="val"/> || 错误的：<div attr="val-ue"/> <div attr="value"/>

[attr$="val"] 选择属性attr的值结尾为val字符的元素 （区分大小写）<div attr="text val"/> <div attr="val"/> <div attr="434val"/> || 错误的：<div attr="val323"/> <div attr="val-ue"/>

[attr^="val"] 选择属性attr的值开头为val字符的元素 （区分大小写）<div attr="val"/> <div attr="val-ue"/> <div attr="value"/>|| 错误的：<div attr="text val"/>

[attr*="val"] 选择属性attr的值任意位置包含val字符的元素（区分大小写）<div attr="text val"/> <div attr="val"/> <div attr="val-ue"/> <div attr="value"/>

[attr|="val"] 选择属性attr的值开头为val的单词或者为val-单词的元素（区分大小写）<div attr="val"/> <div attr="val-ue"/> || 错误的：<div attr="val text "/> <div attr="text val"/> <div attr="value"/>

[attr*="val" I] 或者 [attr*="val" i] 选择属性attr的值任意位置包含val或者VAL或者 Val 或者vAl或者 vaL字符（不区分大小写）的元素<div attr="text val"/> <div attr="val"/> <div attr="val-ue"/> <div attr="value"/><div attr="Val"/> <div attr="VAL"/><div attr="VAl"/> <div attr="vaL"/>

此外，搜索匹配的效果也可以通过根据输入内容动态创建一段CSS代码来实现。

   
	
    
上海市
	
    
杭州市
   

var eleStyle = document.createElement('style');document.head.appendChild(eleStyle);// 文本输入框input.addEventListener("input", function() {   	var value = this.value.trim();	eleStyle.innerHTML = value	? `[data-search]:not([data-search*="${     value}"]) {display: none;}`	: '';});

参考：