正则表达式在JS中的构建及实现文本匹配替换

位置: 首页 > 前端三套件
[发布: 2024.3.3  作者: 马黑  阅读: 115]

正则表达式,英文名称为 Regular Expression,regular意为规则,express是表达式。正则表达式用于文本查找,是对查找关键词的规则描述。我们查找特定的文本内容,总是要通过关键词进行查找,关键词可以是精准的,也可以是模糊的,比方说,我们要在名册中查找“王大军”,这可以用精准查找,“王大军”就是查找关键词,查找的对象也是“王大军”;而当我们想查找的是不论姓什么,名叫“大军”的都找出来,这时候的查找就需要设定一个关键词描述,令其可以模糊匹配名册中的姓名中有“大军”的所有姓名。不论精准匹配,还是模糊匹配,正则表达式都能胜任。

下面有一份名册片段,我们要查找出所有姓名中有“大军”二字的姓名:

欧阳军  何晓阳  方丽丽  范大军  黄杨大军  唐小红  大军  饶树龙  韩小军  聂大军  龙家俊  

点击上方按钮,见证奇迹。咋这么神奇呢?这就是正则表达式的功劳。这里,我们构建了一个查找关键词:

/[一-龥]*大军/g

符号//用以包裹正则表达式:[一-龥]*中,中括号里的内容是汉字到汉字的所有汉字,*表示这些汉字出现0次或多次;大军是字面量,容易理解,不多解释。g是正则表达式的一个开关,表示全局查找,这根据需要而定,查找全部的符合规则的目标字串,需要它。

正则表达式要用在编程语言中,JavaScript(简称JS)就是一门编程语言。在JS里,我们有两种方式声明和构建正则表达式:

//方法一: let reg1 = /[一-龥]*大军/g;   //方法二: let reg2 = new RegExp('[一-龥]*大军', 'g');

这两种方法表达的都是全局匹配含有“大军”的中文姓名。方法一更简洁,方法二则在构造含有JS变量的正则表达式时更具灵活性,可以拼接字面量和变量。

那如何给符合查找特征的名字标红呢?看看本文的函数:

function findNames(ele,keyword) {     var str = ele.innerText;     var reg = new RegExp('([一-龥]*' + keyword + ')', 'g');     ele.innerHTML = str.replace(reg, '<span class="tRed">$1</span>'); };

findNames 这个函数需要两个参数,ele 是文本容器变量,keyword 是查找关键字变量。函数里,我们先声明一个变量 str 令其等于文本容器的文本内容(innerText),接着构建一个正则表达式并赋值给变量 reg,然后用JS内置的 replace 函数(也可以使用replaceAll函数)替换 str 文本:将符合正则表达式描述规则的文本通通替换为带 span 标签的字串,这个 span 标签有一个class属性,通过事先设置好的CSS设定给匹配正则表达式的文本着色,着色后的 str 文本再装回文本容器(innerHTML)。点击前面的按钮,就是调用的这个函数。

前一篇: 《千灯展卷》关键帧动画制作演示
下一篇: 认识CSS的background(一)

发表评论:

  
 

评论列表 [2条]

#2 | 马黑 于 2024-3-3 22:18 发布: 不是包含,是给出一个范围,就像[0-9]给出的是所有数字一样,它给出的是汉字的范围,绝大多数的汉字就在这个范围里。

#1 | 小希 于 2024-3-3 21:56 发布: [一-龥]包括了整个汉字库?

Copyright © 2023 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com