正则&highlight高亮实现(干货)

  1. 云栖社区>
  2. 博客>
  3. 正文

正则&highlight高亮实现(干货)

牧云云 2017-01-12 22:18:00 浏览417
展开阅读全文

写完正则表达式以后在浏览器上检测实在是不方便,于是就写了一个JS正则小工具,大大地提高了学习效率。学习之余用正则实现了一个highlight高亮demo,欢迎交流。

什么是正则表达式?

简单的说:正则表达式(Regular Expression)是一种处理字符串匹配的语言;

正则表达式描述了一种字符串匹配的模式,可以用来检查一个字符串是否含有某种子串,对匹配到的子串进行“取出”或“替换”操作。

正则表达式的应用

正则表达式在实际的开发过程中非常实用,能够快速解决一些复杂的字符串处理问题,下面我对正则表达式的应用做一些简单分类:

第一种:数据验证

比如,你要验证一个字符串是否是正确的EMail,Telphone,Ip等等,那么采用正则表达式就好非常方便。

第二种:内容查找

比如,你要抓取一个网页的图片,那么你肯定要找到<img>标签,这时候用正则表达式就可以精准的匹配到。

第三种:内容替换

比如,你要把手机号码中间四位隐藏掉变成这种模式,123****4567,那么采用正则表达式也会非常方便。

正则表达式有哪些内容

1、正则表达式的几个重要的概念

  • 子表达式:在正则表达式中,如果使用"()"括起来的内容,称之为“子表达式”
  • 捕获:子表达式匹配到的结果会被系统放在缓冲区中,这个过程,我们称之为“捕获”
  • 反向引用:我们使用"\n",其中n是数字,表示引用之前某个缓冲区之间的内容,我们称之为“反向引用”

2、数量限定符

x+
表示:1或多个
x*
表示:0或多个
x?
表示:0或1个
x{n}
表示: n个
x{n,}
表示:至少n个
x{n,m}
表示:n至m个,贪婪原则,会尽可能匹配多个;如果在后面加个?,则为非贪婪原则

3、字符限定符

\d
表示:匹配一个数字字符,[0-9]
\D
表示:匹配一个非数字字符,[^0-9]
\w
表示:匹配包括下划线在内的单词字符,[0-9a-zA-Z_]
\W
表示:匹配任何非单词字符,[^0-9a-zA-Z_]
\s
表示:匹配任何空白字符,空格、回车、制表符
\S
表示:匹配任何非空白字符
 .
表示:匹配任何单个字符

此外还有以下几种:

范围字符:
[a-z]、[A-Z]、[0-9]、[0-9a-z]、[0-9a-zA-Z]
任意字符:
[abcd]、[1234]
非在内的字符:
[^a-z]、[^0-9]、[^abcd]

 4、 定位符

^
表示:开头标识
$
表示:结尾标识
\b
表示:单词边界
\B
表示:非单词边界

 5、转义符

\
用于匹配某些特殊字符

 6、选择匹配符

|
可以匹配多个规则

 7、特殊用法

?=
正向预查:匹配以指定内容结束的字符串
?!
负向预查:匹配不是以指定内容结束的字符串
?:
不把选择匹配符的内容放到缓冲区

正则表达式在Javascript下的使用方法

在Javascript下使用正则表达式,有两种方法:

第一种方法:使用RegExp类

提供的方法有:(正则表达式在前面)

test(str)

在字符串匹配是否有匹配模式的字符串,返回true/false

exec

如果正则表达式中有子表达式,使用exec方法时 //返回的是:result[0] = 匹配结果 ,

result[1] = 子表达式1的匹配结果 ……

第二种方法是:使用String类

提供的方法有:(正则表达式在后面)

search
返回匹配模式的字符串出现的位置,如果没有,返回-1
match
返回匹配模式匹配到的字符串,如果有,返回数组,无,返回null
replace
将匹配模式匹配到的字符串进行替换
split
将字符串已匹配模式为分隔符进行字符串分隔,返回数组

总结

正则表达式就是我们实现某个功能的一个工具,这个工具:

1、功能强大

正则表达式中各种限定符的不同组合会实现不同的功能,有时实现一个复杂的功能需要编写很长的正则表达式,如何能精准匹配,
这就要考验一个程序员的能力了。

2、简洁方便

平常我们在进行字符串内容查找,只能进行某个特定字符串的查找,但是正则表达式可以帮助我们进行模糊查找,更快更方便,
仅仅需要一个正则表达式串。

3、各种语言基本上都支持

目前如JAVA、PHP、Javascript、C#、C++等主流语言都支持正则表达式。

4、学习很简单,应用很高深

学习正则表达式很快也很简单,但是如何在实际开发中编写出高效地,精准地正则表达式,还是需要长时间的尝试和积累。

作者:牧云云
出处:http://www.cnblogs.com/MuYunyun/"
本文版权归作者和博客园所有,欢迎转载,转载请标明出处。
如果您觉得本篇博文对您有所收获,请点击右下角的 [推荐],谢谢!

网友评论

登录后评论
0/500
评论
牧云云
+ 关注