之前项目中有一个功能,需要根据图片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;
}
效果如下:
除了上面介绍的常用匹配规则外,还有其他的匹配规则:
- ^ 表示从字符串开始位置匹配
- $ 表示从字符串结束位置匹配
- * 表示字符串任意位置匹配
- i 表示字符串匹配不区分大小写
- 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;}`
: '';
});