网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > javascript

一篇文章让你快速掌握JavaScript正则表达式的基础知识

2021/12/1 22:11:50

JavaScript正则表达式的基础知识 正则表达式是描述字符模式的对象。 正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。 参考教材:w3cschool | JavaScript RegExp 对象语法 定义 当使用 构造函数 创造正…

JavaScript正则表达式的基础知识

        正则表达式是描述字符模式的对象。

        正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。

        参考教材:w3cschool | JavaScript RegExp 对象

  • 语法

        定义

        当使用 构造函数 创造正则对象时,需要常规的字符转义规则(在前面加反斜杠 \)

        /* 比如,以下两种方式的定义是等价的 */

        // 构造函数方式

        const reg = new RegExp("\\w+");

        // 字面量方式

        const reg = /\w+/;

  • 修饰符

        用于执行区分大小写和全局匹配

         修饰符             描述

            i     执行对大小写不敏感的匹配。

            g     执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。

            m     执行多行匹配。

            

        /* 例子 */

        const reg = /\w/gi

  • 方括号

        用于查找某个范围内的字符:

 表达式              描述

 [abc]             查找方括号之间的任何字符。

 [^abc]             查找任何不在方括号之间的字符。

 [0-9]             查找任何从 0 至 9 的数字。

 [a-z]             查找任何从小写 a 到小写 z 的字符。

 [A-Z]             查找任何从大写 A 到大写 Z 的字符。

 [A-z]             查找任何从大写 A 到小写 z 的字符。

 [adgk]             查找给定集合内的任何字符。

 [^adgk]            查找给定集合外的任何字符。

 (red|blue|green)   查找任何指定的选项。

 /* 例子 */

const reg = /[0-9]/g

  • 元字符

        是拥有特殊含义的字符:

元字符         描述

 .         查找单个字符,除了换行和行结束符。

 \w         查找单词字符。

 \W         查找非单词字符。

 \d         查找数字。

 \D         查找非数字字符。

 \s         查找空白字符。

 \S         查找非空白字符。

 \b         匹配单词边界。

 \B         匹配非单词边界。

 \0         查找 NUL 字符。

 \n         查找换行符。

 \f         查找换页符。

 \r         查找回车符。

 \t         查找制表符。

 \v         查找垂直制表符。

 

/* 例子 */

const reg = /\d/g   // 匹配数字

  • 量词

        是拥有特殊含义的字符:


量词              描述

 n+         匹配任何包含至少一个 n 的字符串。

 n*          匹配任何包含零个或多个 n 的字符串。

 n?          匹配任何包含零个或一个 n 的字符串。

 n{X}       匹配包含 X 个 n 的序列的字符串。

 n{X,Y}     匹配包含 X 至 Y 个 n 的序列的字符串。

 n{X,}       匹配包含至少 X 个 n 的序列的字符串。

 n$          匹配任何结尾为 n 的字符串。

 ^n          匹配任何开头为 n 的字符串。

 ?=n        匹配任何其后紧接指定字符串 n 的字符串。

 ?!n        匹配任何其后没有紧接指定字符串 n 的字符串。

 

/* 例子 */

const reg = /\d+/g  // 匹配至少一个数字

  • 方法

        是拥有特殊含义的字符:

方法                 描述

 compile      编译正则表达式。

 exec     检索字符串中指定的值。返回找到的值,并确定其位置。

 test             检索字符串中指定的值。返回 true 或 false。

 search     检索与正则表达式相匹配的值。返回首次出现的位置,没有则为-1。

 match     找到一个或多个正则表达式的匹配。

 replace       替换与正则表达式匹配的子串。

 split     把字符串分割为字符串数组。

 

/* 例子 */

var patt = /Hello/g

var result = patt.test(str) // 查找Hello字串 -> true


  • 举例


1、正则表达式删除html标签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>正则表达式删除html标签—www.woaidaogu.com</title> 
</head>
<body>
<script type="text/javascript">
var string='<div class"test">Test a code</div><em>I am a girl.</em>';
var reg=/<[^>]+>/gim;
var str=string.replace(reg,""); 
console.log(str);
</script> 
</body>
</html>

image.png

2、下面代码需要提取href后面的网址,[]内的日期和链接的文字

<li><a href="http://localhost/Z-Blog18/article/143.htm" title="FCKEditor高亮代码插件测试"><span class="article-date">[09/11]</span>FCKEditor高亮代码插件测试</a></li>


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>提取href后面的网址,[]内的日期和链接的文字—www.woaidaogu.com</title> 
</head>
<body>
<script type="text/javascript">
var str = '<li><a href="http://localhost/Z-Blog18/article/143.htm" title="FCKEditor高亮代码插件测试"><span class="article-date">[09/11]</span>FCKEditor高亮代码插件测试</a></li>';
var pattern = /http:\/\/([^\s]+)".+?span.+?\[(.+?)\].+?>(.+?)</gi;
var mts = pattern.exec(str);
if (mts != null)
{
console.log(mts[1]);
console.log(mts[2]);
console.log(mts[3]);
console.log(mts[4]);
}
</script>
</body>
</html>

image.png

        通过以上内容让我们对JavaScript正则表达式有了更深的认识,感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

  • js如何遍历数组保存需要的

    我们如何通过遍历数组删除不需要的,保留需要的内容呢?我们来看看下面的代码是如何实现的。<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>js如何遍历数组保存需要的</title> <meta http-…

    2021/5/16 21:43:10
  • js写的urldecode函数及作用

    本函数对字符串进行URL解码。例如通过urlencode编码后的字符串,可通过UrlDecode进行解码。对Url路径加码的函数是UrlEncode 用法相反,和UrlDecode是一致对应的URLEncode是这样编码的 1、数字和字母不变。 2、空格变为"+"号。 3、其他被编码成&…

    2021/5/16 16:25:41
  • js getelementbyid后获取下一级的ID的方法

    根据id获取父对象,然后使用childNodes获取所有子对象数组,关键代码:document.getElementById(div_id).childNodes; // 子对象数组实现代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh…

    2021/5/9 13:28:27
  • javascript使用settimeout闭包实现倒计时

    闭包知识1、闭包的概念:指有权访问另一个函数作用域中的变量的函数,一般情况就是在一个函数中包含另一个函数。2、闭包的作用:访问函数内部变量、保持函数在环境中一直存在,不会被垃圾回收机制处理因为函数内部声明 的变量是局部的,只能在函数内部访问到,但是函数外…

    2021/4/24 19:56:28
  • js定时器setInterval清除之后还会执行

    今天在博客上看到有人问js定时器setInterval清除之后还会执行,他是js定时器控制一个盒子做旋转动画,离开页面后js定时器还在执行,但是盒子这个dom却被浏览器消除了,以至于再次进入该页面时动画会加速执行。解决方法 离开页面时清除定时器 进入时重新开启定时器d…

    2021/4/24 16:06:27
  • js添加删除表格table行列-附源码

    <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-…

    2021/3/26 21:48:19
  • js如何判断页面某个元素是否已经绑定某个事件?

    我们有时防止页面元素重复绑定事件,需要判断一下页面对应的元素是否已经绑定了事件,下面就是我写了一个javascript函数用来判断页面某个元素是否已经绑定某个事件:javascript代码var div = document.getElementById(div);logEvent(click , div , false , false , funct…

    2021/3/24 21:20:27
  • A域名js访问B域名对象如何实现?JavaScript跨域解决办法

    什么是跨域JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无…

    2021/3/11 22:44:58
  • js如何模拟手机平板移动设备--触摸、点击、滑屏(附源码)

    前一阵子公司做项目,手机上的网页需要js来模拟手机平板等移动设备的触摸、点击、滑屏效果,直接上代码,供大家参考(function(doc, win, undefined) { "use strict"; var start = { //记录开始的触点 x: 0, y: 0 }, …

    2021/2/28 22:08:08
  • 一张图教你彻底搞清楚javascript中的top、clientTop、scrollTop、offsetTop都是什么?

    clipboardscrollHeight: 获取对象的滚动高度。scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父…

    2021/2/28 21:52:11