·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·飞飞 - 2024-12-5 15:53
·飞飞 - 2024-12-3 16:42
·悄然 - 2024-12-3 16:41
·飞飞 - 2024-12-1 18:27
正则表达式在JS中的构建及实现文本匹配替换
正则表达式,英文名称为 Regular Expression,regular意为规则,express是表达式。正则表达式用于文本查找,是对查找关键词的规则描述。我们查找特定的文本内容,总是要通过关键词进行查找,关键词可以是精准的,也可以是模糊的,比方说,我们要在名册中查找“王大军”,这可以用精准查找,“王大军”就是查找关键词,查找的对象也是“王大军”;而当我们想查找的是不论姓什么,名叫“大军”的都找出来,这时候的查找就需要设定一个关键词描述,令其可以模糊匹配名册中的姓名中有“大军”的所有姓名。不论精准匹配,还是模糊匹配,正则表达式都能胜任。
下面有一份名册片段,我们要查找出所有姓名中有“大军”二字的姓名:
欧阳军 何晓阳 方丽丽 范大军 黄杨大军 唐小红 大军 饶树龙 韩小军 聂大军 龙家俊
点击上方按钮,见证奇迹。咋这么神奇呢?这就是正则表达式的功劳。这里,我们构建了一个查找关键词:
符号//用以包裹正则表达式:[一-龥]*中,中括号里的内容是汉字一到汉字龥的所有汉字,*表示这些汉字出现0次或多次;大军是字面量,容易理解,不多解释。g是正则表达式的一个开关,表示全局查找,这根据需要而定,查找全部的符合规则的目标字串,需要它。
正则表达式要用在编程语言中,JavaScript(简称JS)就是一门编程语言。在JS里,我们有两种方式声明和构建正则表达式:
这两种方法表达的都是全局匹配含有“大军”的中文姓名。方法一更简洁,方法二则在构造含有JS变量的正则表达式时更具灵活性,可以拼接字面量和变量。
那如何给符合查找特征的名字标红呢?看看本文的函数:
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 发布: [一-龥]包括了整个汉字库?