提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

使用正则过滤html标签

HTML 标签 过滤 正则 使用
2023-09-27 14:26:05 时间

JavaScript有两种方式创建一个正则表达式：

第一种方式是直接通过/正则表达式/写出来，第二种方式是通过new RegExp('正则表达式')创建一个RegExp对象。

两种写法是一样的：

var re1 =/A/;
var re2 =newRegExp('A');

结构：

字符字面量、字符组、量词、锚字符、分组、选择分支、反向引用。

  1. 字面量，匹配一个具体字符，包括不用转义的和需要转义的。比如a匹配字符"a"，又比如\n匹配换行符，又比如\.匹配小数点。
  2. 字符组，匹配一个字符，可以是多种可能之一，比如[0-9]，表示匹配一个数字。也有\d的简写形式。另外还有反义字符组，表示可以是除了特定字符之外任何一个字符，比如[^0-9]，表示一个非数字字符，也有\D的简写形式。
  3. 量词，表示一个字符连续出现，比如a{1,3}表示“a”字符连续出现3次。另外还有常见的简写形式，比如a+表示“a”字符连续出现至少一次。
  4. 锚点，匹配一个位置，而不是字符。比如^匹配字符串的开头，又比如\b匹配单词边界，又比如(?=\d)表示数字前面的位置。
  5. 分组，用括号表示一个整体，比如(ab)+，表示"ab"两个字符连续出现多次，也可以使用非捕获分组(?:ab)+。
  6. 分支，多个子表达式多选一，比如abc|bcd，表达式匹配"abc"或者"bcd"字符子串。
  7. 反向引用，比如\2，表示引用第2个分组。

操作符：

  1. 转义符 \
  2. 括号和方括号 (...)、(?:...)、(?=...)、(?!...)、[...]
  3. 量词限定符 {m}、{m,n}、{m,}、?、*、+
  4. 位置和序列 ^ 、$、 \元字符、 一般字符
  5. 管道符（竖杠）|

上面操作符的优先级从上至下，由高到低。

案例：

过滤所有span标签：

var newContent = Regex.Replace(htmlContent, "<span.*?>.*?</span>", String.Empty);

过滤所有具有某个class=Text的span

var newContent= Regex.Replace(testStr, "<span class=\"Text\".*?>.*?</span>", String.Empty);

匹配html标签，但不匹配html标签里的内容

 var reg =  /<[^>]+>/g;                  //匹配所有的html标签。但不包括html标签内的内容
 var reg2 = /<(?!img).*?>/g;             //匹配除img标签外的html标签  不包括html标签内的内容
 var reg3 = /<(?!img|p|\/p).*?>/g;       //匹配除img、p标签外的html标签  不包括html标签内的内容
 var reg4 = /<(img|br|hr|input)[^>]*>/g;          //只匹配img、br、hr、input标签

网上说用 new RegExp() 比 正则字面量  速度快

// var reg =  /<[^>]+>/g;  //过滤所有的html标签
var reg =  new RegExp('<[^>]+>','g');  //过滤所有的html标签，不包括内容

// var reg2 = /<(img|br|hr|input)[^>]+>/g;  //只匹配img、br、hr、input标签
var reg2 = new RegExp('<(img|br|hr|input)[^>]+>','g');  //只匹配img、br、hr、input标签
 
 正则表达式速查表
字符 描述
\

转义字符,将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。

例如，"n"匹配字符"n"。"\n"匹配一个换行符。串行"\\"匹配"\"而"\("则匹配"("。

需要转义的字符有：

^ $ . * + ? | \ / ( ) [ ] { } = ! : - ,
 ^

匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性，^也匹配“\n"或"\r"之后的位置。

如果多行模式设为 true，^ 在换行符后也能立即匹配，比如 /^A/ 匹配不了 "an A" 里面的 "A"，但是可以匹配 "An A" 里面第一个 "A"。

他有两种含义：

1) 匹配输入的开头,/^A/ 选择以'A'开头的的字符
2) 一个否定的字符集: [^A] ，意思是匹配不是 'A' 的字符
 $

匹配输入字符串的结束位置。如果设置了RegExp对象的Multiline属性，$也匹配"\n"或"\r"之前的位置。

如果多行模式设为 true，^ 在换行符前也能立即匹配，比如 /t$/ 不能匹配  "eater" 中的 "t"，但是可以匹配 "eat" 中的 "t"。

"^The"：表示所有以"The"开始的字符串（"There"，"The cat"等）；

"of despair$"：表示所以以"of despair"结尾的字符串；

"^abc$"：表示开始和结尾都是"abc"的字符串——呵呵，只有"abc"自己了；

"notice"：表示任何包含"notice"的字符串。
i 执行对大小写不敏感的匹配
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m 执行多行匹配
 * 匹配前面的子表达式零次或多次。例如，zo*能匹配"z"以及"zoo"。*等价于{0,}。
 + 匹配前面的子表达式一次或多次。例如，"zo+"能匹配"zo"以及"zoo"，但不能匹配"z"。+等价于{1,}。 
 ?

匹配前面的子表达式零次或一次。例如，"do(es)?"可以匹配"does"或"does"中的"do"。?等价于{0,1}。

如果紧跟在任何量词 *、 +、? 或 {} 的后面，将会使量词变为非贪婪（匹配尽量少的字符），和缺省使用的贪婪模式（匹配尽可能多的字符）正好相反。

例如，对 "123abc" 使用 /\d+/ 将会匹配 "123"，而使用 /\d+?/ 则只会匹配到 "1"。
 {n} n是一个非负整数。匹配确定的n次。例如, /a{2,}/ 匹配 "aa", "aaaa" 和 "aaaaa" 但是不匹配 "a"。
 {n,} n是一个非负整数。至少匹配n次。例如，"o{2,}"不能匹配"Bob"中的"o"，但能匹配"foooood"中的所有o。"o{1,}"等价于"o+"。"o{0,}"则等价于"o*"。
 {n,m}

m和n均为非负整数，其中n<=m。最少匹配n次且最多匹配m次。例如，“o{1,3}"将匹配"fooooood"中的前三个o。"o{0,1}"等价于"o?"。请注意在逗号和两个数之间不能有空格。

例子：/ab{2,5}c/表示匹配这样一个字符串：第一个字符是“a”，接下来是2到5个字符“b”，最后是字符“c”
 ?

当该字符紧跟在任何一个其他限制符（*,+,?，{n}，{n,}，{n,m}）后面时({m,n}? {m,}? ?? +? *?)，匹配模式是非贪婪的。

非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串“oooo"，"o+?"将匹配单个"o"，而"o+"将匹配所有"o"。
 . 通配符，表示几乎任意字符。换行符、回车符、行分隔符和段分隔符除外,匹配除“\n"之外的任何单个字符。要匹配包括"\n"在内的任何字符，请使用像"(.|\n)"的模式。
(x)

像下面的例子展示的那样，它会匹配'x'并且记住匹配项。其中括号被称为捕获括号。

/a+/匹配连续出现的“a”，而要匹配连续出现的“ab”时，需要使用/(ab)+/

其中括号是提供分组功能，使量词+作用于“ab”这个整体，测试如下：

var regex = /(ab)+/g;
var string = "ababa abbb ababab";
console.log( string.match(regex) );
// => ["abab", "ab", "ababab"]
(?:x)

匹配'x'但是不记住匹配项。这种括号叫作非捕获括号，使得你能够定义与正则表达式运算符一起使用的子表达式。

看看这个例子/(?:foo){1,2}/。如果表达式是/foo{1,2}/，{1,2}将只应用于'foo'的最后一个字符'o'。如果使用非捕获括号，则{1,2}会应用于整个'foo'单词。
x(?=y)

向前断言: x 被 y 跟随时匹配 x。

例子，对于/Jack(?=Sprat)/，“Jack”在跟有“Sprat”的情况下才会得到匹配．/Jack(?=Sprat|Frost)/ “Jack”后跟有“Sprat”或“Frost”的情况下才会得到匹配。不过， 匹配结果不包括“Sprat”或“Frost”。

例子：

var result = "hello".replace(/(?=l)/g, '#');
console.log(result);
// => "he#l#lo"
x(?!y)

向前否定断言: x 没有被y紧随时匹配x。例如，对于/\d+(?!\。)/，数字后没有跟随小数点的情况下才会得到匹配。对于/\d+(?!\.)/.exec(3.141)，匹配‘141’而不是‘3’。

例子：

var result = "hello".replace(/(?!l)/g, '#');
console.log(result);
// => "#h#ell#o#"
(?<=y)x

向后断言:x跟随y的情况下匹配x。

例如，对于/(?<=Jack)Sprat/，“Sprat”紧随“Jack”时才会得到匹配。对于/(?<=Jack|Tom)Sprat，“Sprat”在紧随“Jack”或“Tom”的情况下才会得到匹配。不过，匹配结果中不包括“Jack”或“Tom”。
(?<!y)x

向后否定断言:x不跟随y时匹配x。

例如，对于/(?<!-)\d+/，数字不紧随-符号的情况下才会得到匹配。对于/(?<!-)\d+/.exec(3)，“3”得到匹配。而/(?<!-)\d+/.exec(-3)的结果无匹配，这是由于数字之前有-符号。
 x|y 匹配x或y。例如，“z|food"能匹配"z"或"food"。"(z|f)ood"则匹配"zood"或"food"。 
 [xyz] 字符集合。匹配所包含的任意一个字符。例如，“[abc]"可以匹配"plain"中的"a"。比如/a[123]b/可以匹配如下三种字符串："a1b"、"a2b"、"a3b"。
 [^xyz]

负值字符集合。匹配未包含的任意字符。例如，“[^abc]"可以匹配"plain"中的"p"。

一个反向字符集。也就是说，它匹配任何没有包含在方括号中的字符。你可以使用破折号（-）来指定一个字符范围。任何普通字符在这里都是起作用的。

例如，[^abc] 和 [^a-c] 是一样的。他们匹配"brisket"中的‘r’，也匹配“chop”中的‘h’。
 [a-z] 字符范围。匹配指定范围内的任意字符。例如，“[a-z]"可以匹配"a"到"z"范围内的任意小写字母字符。
 [^a-z] 负值字符范围。匹配任何不在指定范围内的任意字符。例如，“[^a-z]"可以匹配任何不在"a"到"z"范围内的任意字符。
[\b]

匹配一个退格(U+0008)。（不要和\b混淆了。）
 \b

\b是单词边界，具体就是\w和\W之间的位置，也包括\w和^之间的位置，也包括\w和$之间的位置。

例子:

  • /\bm/  在 "moon" 中匹配到 "m" 
  • /oo\b/  在 "moon" 中不会匹配到 "oo", 因为 "oo" 后面跟着 "n" 这个单词字符.
  • /oon\b/ 在 "moon" 中匹配 "oon"， 因为 "oon" 是这个字符串的结尾, 因此后面没有单词字符
  • /\w\b\w/ 将永远不会匹配任何东西，因为一个单词字符后面永远不会有非单词字符和单词字符。

具体分析：

比如一个文件名是"[JS] Lesson_01.mp4"中的\b，如下：

var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#');
console.log(result);
// => "[#JS#] #Lesson_01#.#mp4#"

为什么是这样呢？这需要仔细看看。

首先，我们知道，\w是字符组[0-9a-zA-Z_]的简写形式，即\w是字母数字或者下划线的中任何一个字符。而\W是排除字符组[^0-9a-zA-Z_]的简写形式，即\W是\w以外的任何一个字符。

此时我们可以看看"[#JS#] #Lesson_01#.#mp4#"中的每一个"#"，是怎么来的。

第一个"#"，两边是"["与"J"，是\W和\w之间的位置。
第二个"#"，两边是"S"与"]"，也就是\w和\W之间的位置。
第三个"#"，两边是空格与"L"，也就是\W和\w之间的位置。
第四个"#"，两边是"1"与"."，也就是\w和\W之间的位置。
第五个"#"，两边是"."与"m"，也就是\W和\w之间的位置。
第六个"#"，其对应的位置是结尾，但其前面的字符"4"是\w，即\w和$之间的位置。
 \B

匹配非单词边界。这是上一个字符和下一个字符属于同一类型的位置：要么两者都必须是单词，要么两者都必须是非单词，例如在两个字母之间或两个空格之间。字符串的开头和结尾被视为非单词。与匹配的词边界相同，匹配的非词边界也不包含在匹配中。例如，/\Bon/ 在 “at noon” 中匹配 “on” ，/ye\B/ 在 "possibly yesterday"中匹配"ye" 。

\B就是\b的反面的意思，非单词边界。例如在字符串中所有位置中，扣掉\b，剩下的都是\B的。

具体说来就是\w与\w、\W与\W、^与\W，\W与$之间的位置。

比如上面的例子，把所有\B替换成"#"：

var result = "[JS] Lesson_01.mp4".replace(/\B/g, '#');
console.log(result);
// => "#[J#S]# L#e#s#s#o#n#_#0#1.m#p#4"
 \cx 匹配由x指明的控制字符。例如，\cM匹配一个Control-M或回车符。x的值必须为A-Z或a-z之一。否则，将c视为一个原义的“c"字符。
 \d 匹配一个数字字符。等价于[0-9]。
 \D 匹配一个非数字字符。等价于[^0-9]。
 \f 匹配一个换页符。等价于\x0c和\cL。
 \n 匹配一个换行符。等价于\x0a和\cJ。 
 \r 匹配一个回车符。等价于\x0d和\cM。
 \s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。 
 \S 匹配任何非空白字符。等价于[^ \f\n\r\t\v]。
 \t 匹配一个制表符。等价于\x09和\cI。
 \v 匹配一个垂直制表符。等价于\x0b和\cK。
 \w 匹配包括下划线的任何单词字符(字母、数字或者下划线)。等价于“[A-Za-z0-9_]"。
 \W 匹配任何非单词字符。等价于“[^A-Za-z0-9_]"。
 \xn 匹配n，其中n为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如，“\x41"匹配"A"。"\x041"则等价于"\x04&1"。正则表达式中可以使用ASCII编码。.
 \num 匹配num，其中num是一个正整数。对所获取的匹配的引用。例如，“(.)\1"匹配两个连续的相同字符。
 \n 标识一个八进制转义值或一个向后引用。如果\n之前至少n个获取的子表达式，则n为向后引用。否则，如果n为八进制数字（0-7），则n为一个八进制转义值。
 \nm 标识一个八进制转义值或一个向后引用。如果\nm之前至少有nm个获得子表达式，则nm为向后引用。如果\nm之前至少有n个获取，则n为一个后跟文字m的向后引用。如果前面的条件都不满足，若n和m均为八进制数字（0-7），则\nm将匹配八进制转义值nm。
 \nml 如果n为八进制数字（0-3），且m和l均为八进制数字（0-7），则匹配八进制转义值nml。
 \un 匹配n，其中n是一个用四个十六进制数字表示的Unicode字符。例如，\u00A9匹配版权符号（©）。

 

常用正则表达式
用户名 /^[a-z0-9_-]{3,16}$/
密码 /^[a-z0-9_-]{6,18}$/
密码2 (?=^.{8,}$)(?=.*\d)(?=.*\W+)(?=.*[A-Z])(?=.*[a-z])(?!.*\n).*$ (由数字/大写字母/小写字母/标点符号组成，四种都必有，8位以上)
十六进制值 /^#?([a-f0-9]{6}|[a-f0-9]{3})$/
电子邮箱 /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
URL /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ 或 [a-zA-z]+://[^\s]*
IP 地址 /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/
/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/ 或 ((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)
HTML 标签 /^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/或<(.*)(.*)>.*<\/\1>|<(.*) \/>
删除代码\\注释 (?<!http:|\S)//.*$
匹配双字节字符(包括汉字在内) [^\x00-\xff]
Unicode编码中的汉字范围 /^[\u2E80-\u9FFF]+$/
汉字(字符) [\u4e00-\u9fa5]
中文及全角标点符号(字符) [\u3000-\u301e\ufe10-\ufe19\ufe30-\ufe44\ufe50-\ufe6b\uff01-\uffee]
日期(年-月-日) (\d{4}|\d{2})-((0?([1-9]))|(1[1|2]))-((0?[1-9])|([12]([1-9]))|(3[0|1]))
日期(月/日/年) ((0?[1-9]{1})|(1[1|2]))/(0?[1-9]|([12][1-9])|(3[0|1]))/(\d{4}|\d{2})
时间(小时:分钟, 24小时制) ((1|0?)[0-9]|2[0-3]):([0-5][0-9])
中国大陆固定电话号码 (\d{4}-|\d{3}-)?(\d{8}|\d{7})
中国大陆手机号码 1\d{10}
中国大陆邮政编码 [1-9]\d{5}
中国大陆身份证号(15位或18位) \d{15}(\d\d[0-9xX])?
非负整数(正整数或零) \d+
正整数 [0-9]*[1-9][0-9]*
负整数 -[0-9]*[1-9][0-9]*
整数 -?\d+
小数 (-?\d+)(\.\d+)?
空白行 \n\s*\r 或者 \n\n(editplus) 或者 ^[\s\S ]*\n 
QQ号码 [1-9]\d{4,}
不包含abc的单词 \b((?!abc)\w)+\b
匹配首尾空白字符 ^\s*|\s*$

相关文章