请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2024-3-3 19:36 编辑
正则表达式在JS中的构建与文本匹配替换
正则表达式，英文名称为 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）。点击前面的按钮，就是调用的这个函数。
| 
发表于 2024-3-3 19:32
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-3-3 21:49
韩小军没被飘红。
