CSS选择器正则表达式的使用

之前项目中有一个功能，需要根据图片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代码来实现。

<input type="search" id="input" placeholder="输入城市名称或拼音" />
<ul>
	<li data-search="上海市 shanghai">上海市</li>
	<li data-search="杭州市 hangzhou">杭州市</li>
</ul>

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;}`
	: '';
});

参考：
巧用CSS属性值正则匹配选择器
css 选择器中的正则表达式