两年前专门学过正则表达式的基本用法，之后很少用到，现在已经忘的差不多了。现在重新学习并记录，便于查看。记忆力不好，不常用的东西从来都是记不住的。
一、正则表达式的基本用法
语法：
/正则表达式主体/修饰符(可选)
实例：var pattern = /helloworld/i;
1.修饰符
-
i执行对大小写不敏感的匹配 -
g执行全局匹配（查找所有匹配而非在找到第一个匹配后停止） -
m执行多行匹配
2.方括号
-
[abc]查找方括号之间的任何字符 -
[^abc]查找任何不在方括号之间的字符 -
[0-9]查找任何从 0 至 9 的数字 -
[a-z]查找任何从小写 a 到小写 z 的字符 -
[A-Z]查找任何从大写 A 到大写 Z 的字符 -
[A-z]查找任何从大写 A 到小写 z 的字符 -
(x|y)查找任何以 | 分隔的选项
3.元字符
-
.查找单个字符，除了换行和行结束符 -
\w查找单词字符 -
\W查找非单词字符 -
\d查找数字 -
\D查找非数字 -
\s查找空白字符 -
\S查找非空白字符 -
\n查找换行符 -
\b匹配单词边界 -
\B匹配非单词边界
4.量词
-
n+匹配任何包含至少一个 n 的字符串 -
n*匹配任何包含零个或多个 n 的字符串 -
n?匹配任何包含零个或一个 n 的字符串 -
^n匹配任何开头为 n 的字符串 -
n$匹配任何结尾为 n 的字符串 -
?=n匹配任何其后紧接指定字符串 n 的字符串
5.常用方法
- search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
let str = 'Hello World';
//指定字符串搜索
str.search('World'); //6
//匹配正则表达式搜索
str.search(/World/); //6
//匹配正则表达式搜索，区分大小写
str.search(/world/); //-1
//匹配正则表达式搜索，不区分大小写
str.search(/world/i); //6
- replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
let str = 'Hello World';
//替换指定字符串
str.replace('World', 'Apple'); //Hello Apple
//替换与正则表达式匹配的子串
str.replace(/World/, 'Apple'); //Hello Apple
//替换与正则表达式匹配的子串，区分大小写
str.replace(/world/, 'Apple'); //Hello World
//替换与正则表达式匹配的子串，不区分大小写
str.replace(/world/i, 'Apple'); //Hello Apple
- match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。
let str = 'Hello World';
str.match(/World/); //["World", index: 6, input: "Hello World", groups: undefined]
str.match(/\b[A-z]+\b/); //["Hello", index: 0, input: "Hello World", groups: undefined]
str.match(/\b[A-z]+\b/g); //["Hello", "World"]
- test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
let str = 'Hello World';
let pattern = /World/;
pattern.test(str); //true
也可以直接这么写：/World/.test('Hello World')
- exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
let str = 'Hello World';
let pattern = /World/;
pattern.exec(str); //["World", index: 6, input: "Hello World", groups: undefined]
以上列出的都比较常见，如果要了解更详细的信息，可以访问 w3school 的JavaScript RegExp参考手册或者菜鸟教程的正则表达式教程。
二、项目中常用到的一些正则表达式
项目中常用的正则表达式都比较简单，可以自己写，也可以在网上找，例如菜鸟教程的正则表达式在线测试，编程狮的正则表达式在线生成工具，再或者 github 上 start 数比较高的一些正则表达式随记等等。网上资源实在太多，就不一一列举了。
三、过滤富文本图片
在这里记录一个比较具体的例子，有时候会碰到这样的需求，页面里边显示富文本，富文本里边可能包含图片、音频或者视频，为了让页面内容显示的统一美观，可能需要把图片等的过滤一下，先替换成统一的图标，然后点击图标查看具体内容。真实效果如下图所示：
过滤富文本图片.jpg
以下代码比较简单，只处理了过滤图片的逻辑，过滤音频和视频都是类似的，具体还得看项目需求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
img {
width: 200px;
}
.img-icon {
width: 20px;
vertical-align: sub;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<span>第一张图片</span>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3383755366,4243257849&fm=26&gp=0.jpg" />，
<span>第二张图片</span>
<img src="http://img1.imgtn.bdimg.com/it/u=1663134360,1286341285&fm=26&gp=0.jpg" />
</div>
<h3>过滤图片显示为小图标:</h3>
<div id="newBox"></div>
<script>
function handleRichHtmlImg(html) {
let replacedHtml = html.replace(/<?img[^>]*?>/g, str => {
const matchArr = str.match(/src="(.*?)"/) || [];
let imgSrc = matchArr[1] || '';
//这里替换显示的内容根据需求而定
let defaultImg = '<img class="img-icon" src="https://ae01.alicdn.com/kf/H9a480ccb053d43ff89ed22a89982337dB.png" data-img-src=' + imgSrc + ' />';
str = str.replace(/<(img).*?>/g, defaultImg);
return str;
})
return replacedHtml;
}
var box = document.getElementById('box');
var newBox = document.getElementById('newBox');
var html = handleRichHtmlImg(box.innerHTML);
newBox.innerHTML = html;
newBox.onclick = function handleImgClick(e) {
console.log('e', e);
console.log('e.target', e.target);
console.log('当前图片的真实地址', e.target.getAttribute('data-img-src'));
//todo...比如弹框显示放大图片等操作
}
</script>
</body>
</html>
网友评论