使用正则过滤html标签

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*$
posted @ 2021-05-20 23:49  程序员小明1024  阅读(1181)  评论(0编辑  收藏  举报