正则表达式-过滤富文本图片

两年前专门学过正则表达式的基本用法，之后很少用到，现在已经忘的差不多了。现在重新学习并记录，便于查看。记忆力不好，不常用的东西从来都是记不住的。

一、正则表达式的基本用法

语法：/正则表达式主体/修饰符(可选)
实例：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

以下代码比较简单，只处理了过滤图片的逻辑，过滤音频和视频都是类似的，具体还得看项目需求。

    
    
    


  

    第一张图片
    ，
    第二张图片
    
  
  
过滤图片显示为小图标: