问题:

现在要从一个复杂的html代码字符串(包含各种html标签,数字、中文等信息)中找到某一段特别的信息(被一对“|”包裹着),并对他进行加粗、加下滑线处理。

解决思路:

1、用正则匹配“|”出现的次数,处理刚好出现2次的(html字符串中一般不会含有这个字符)

2、使用正则分组,获取“|”之间的内容,并进行替换(添加样式)

代码:

function specialDeal(){
htmlStr = htmlStr.replace(/ /, '');
var reg0 = new RegExp("\\|", "g");
var array = htmlStr.match(reg0);
//当且仅当出现"|"的次数等于2时,对"|"之间的内容进行加粗、并加下划线
if (array != null && array.size() == 2) {
var reg1=new RegExp("([^\\|]*)(\\|)([^\\|]*)(\\|)([^\\|]*)", "ig");
var result = reg1.exec(htmlStr);
if (result) {
htmlStr = htmlStr.replace(reg1,result[1] + "<u><b>" + result[3] + "</b></u>" + result[5]);
}
}
return htmlStr;
}

正则表达式中/i,/g,/ig,/gi,/m的区别和含义

/i (忽略大小写)
/g (全文查找出现的所有匹配字符)
/m (多行查找)
/gi(全文查找、忽略大小写)
/ig(全文查找、忽略大小写)

知识点大梳理

js正则表达式的编写、js正则常用到的几个方法:match、exec、replace

1、js正则表达

在编写正则的时候,如果使用RegExp对象,js正则表达式写在字符串里面,特别需要注意转义。

Js代码  
var reg0=new RegExp("(<span[^>]*(Courier New)[^>]*>)(\\w*)", "ig");  

 等价于:

var reg0=/(<span[^>]+Courier New[^>]+>)(\w*)/ig;  

修饰符

修饰符描述

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

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

m 执行多行匹配。

方括号

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

表达式描述

[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
[A-z] 查找任何从大写 A 到小写 z 的字符。
[adgk] 查找给定集合内的任何字符。
[^adgk] 查找给定集合外的任何字符。
(red|blue|green) 查找任何指定的选项。

元字符

元字符(Metacharacter)是拥有特殊含义的字符:

元字符描述

. 查找单个字符,除了换行和行结束符。
\w 查找单词字符。
\W 查找非单词字符。
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B 匹配非单词边界。
\0 查找 NUL 字符。
\n 查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\v 查找垂直制表符。
\xxx 查找以八进制数 xxx 规定的字符。
\xdd 查找以十六进制数 dd 规定的字符。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词描述

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 的字符串。

RegExp 对象属性

FF: Firefox, IE: Internet Explorer

属性描述FFIE

global RegExp 对象是否具有标志 g。 1 4
ignoreCase RegExp 对象是否具有标志 i。 1 4
lastIndex 一个整数,标示开始下一次匹配的字符位置。 1 4
multiline RegExp 对象是否具有标志 m。 1 4
source 正则表达式的源文本。 1 4

2、Match()方法

定义和用法

match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。

该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。

语法

stringObject.match(searchvalue)
stringObject.match(regexp)

参数描述

searchvalue 必需。规定要检索的字符串值。
regexp 必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象,则需要首先把它传递给 RegExp 构造函数,将其转换为 RegExp 对象。

返回值

存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。

说明

match() 方法将检索字符串 stringObject,以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。

如果 regexp 没有标志 g,那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本,而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外,返回的数组还含有两个对象属性。 index 属性声明的是匹配文本的起始字符在 stringObject 中的位置,input 属性声明的是对 stringObject 的引用。

如果 regexp 具有标志 g,则 match() 方法将执行全局检索,找到 stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串,则返回 null。如果找到了一个或多个匹配子串,则返回一个数组。不过全局匹配返回的数组的内容与前者大不相同,它的数组元素中存放的是 stringObject 中所有的匹配子串,而且也没有 index 属性或 input 属性。

注意:在全局检索模式下,match() 即不提供与子表达式匹配的文本的信息,也不声明每个匹配子串的位置。如果您需要这些全局检索的信息,可以使用 RegExp.exec()。

3、exec()方法

定义和用法

exec() 方法用于检索字符串中的正则表达式的匹配。

语法

RegExpObject.exec(string)

参数 描述

string 必需。要检索的字符串。

返回值

返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

说明

exec() 方法的功能非常强大,它是一个通用的方法,而且使用起来也比 test() 方法以及支持正则表达式的 String 对象的方法更为复杂。

如果 exec() 找到了匹配的文本,则返回一个结果数组。否则,返回 null。此数组的第 0 个元素是与正则表达式相匹配的文本,第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本(如果有的话),第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本(如果有的话),以此类推。除了数组元素和 length 属性之外,exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。我们可以看得出,在调用非全局的 RegExp 对象的 exec() 方法时,返回的数组与调用方法 String.match() 返回的数组是相同的。

但是,当 RegExpObject 是一个全局正则表达式时,exec() 的行为就稍微复杂一些。它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时,在匹配后,它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。这就是说,您可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时,它将返回 null,并把 lastIndex 属性重置为 0。

提示和注释

重要事项:如果在一个字符串中完成了一次模式匹配之后要开始检索新的字符串,就必须手动地把 lastIndex 属性重置为 0。

提示:请注意,无论 RegExpObject 是否是全局模式,exec() 都会把完整的细节添加到它返回的数组中。这就是 exec() 与 String.match() 的不同之处,后者在全局模式下返回的信息要少得多。因此我们可以这么说,在循环中反复地调用 exec() 方法是唯一一种获得全局模式的完整模式匹配信息的方法。

4、replace()方法

定义和用法

replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

语法

stringObject.replace(regexp/substr,replacement)

参数 描述

regexp/substr

必需。规定子字符串或要替换的模式的 RegExp 对象。

请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。

replacement 必需。一个字符串值。规定了替换文本或生成替换文本的函数。

返回值

一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

说明

字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串,然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g,那么 replace() 方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。

replacement 可以是字符串,也可以是函数。如果它是字符串,那么每个匹配都将由字符串替换。但是 replacement 中的 $ 字符具有特定的含义。如下表所示,它说明从模式匹配得到的字符串将用于替换。

字符 替换文本

$1、$2、...、$99 与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。
$& 与 regexp 相匹配的子串。
$` 位于匹配子串左侧的文本。
$' 位于匹配子串右侧的文本。
$$ 直接量符号。

注意:ECMAScript v3 规定,replace() 方法的参数 replacement 可以是函数而不是字符串。在这种情况下,每个匹配都调用该函数,它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来的参数 是与模式中的子表达式匹配的字符串,可以有 0 个或多个这样的参数。接下来的参数是一个整数,声明了匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。

js正则实现从一段复杂html代码字符串中匹配并处理特定信息的更多相关文章

  1. js如何替换字符串中匹配到多处中某一指定节点?

    抛出一个问题,如图,搜索关键字,匹配到四处,那我鼠标放在第二处,我想把它变个颜色,该怎么实现呢?回到文章的标题,js如何替换字符串中匹配到多处中某一指定节点? 字符串的替换,我们首先想到的一个属性是r ...

  2. js正则大扫除

    一:exec匹配不到后返回的是null reg = /c{2,}/; str='cainiao'; execReg(reg,str); 结果返回null,c{2,}表示2个以上的c,而cainiao中 ...

  3. js 正则匹配 小结

    JS的正则表达式 rge.test(str) 检验目标对象中是否包含匹配模式,并相应的返回true或false   rge.source str.search(rge) 将返回一个整数值,指明这个匹配 ...

  4. 怎么用JS截取字符串中第一个和第二个字母间的部分?

    一.JS中用正则判断字符串是否有匹配正则的字符串部分,格式如下: /[a-zA-Z](.*?)[a-zA-Z]/.test('1a123d45678901a2') “.test”前面的部分是正则表达式 ...

  5. js 正则之 判断密码类型

    原文:js 正则之 判断密码类型 今天没啥写的,就分享个思路吧.之前在群里讨论的时候,谢亮兄弟说判断密码是否是纯数字,纯字母之类的.如果用 , 条判断,那就老长一大段了.这个思路是我之前看 jQuer ...

  6. JS正则密码复杂度校验之:JS正则匹配半角英文符号

    概述 在JS密码校验中常常会遇到密码强度的校验需求,借用一位朋友提问的图,他在工作中遇到的一个比较经典的密码强度校验要求: 这个需求有两个难点,一,是如何使用正则匹配所有半角英文标点符号,二,是如何验 ...

  7. JS正则密码复杂度校验之:至少有多种字符中的其中几种

    概述 续接上文的密码校验要求: 这个需求有两个难点,一,是如何使用正则匹配所有半角英文标点符号,二,是如何验证密码段中在要求的四种(大写字母,小写字母,数字,标点符号)类型中至少存在三种. 第一个难点 ...

  8. 深入js正则

    开题 我们常常有正则的各种需求,普通的正则匹配符虽然够用,但是满足不了我们一些很奇怪的需求,所以我们需要更多的关于正则的知识点. 需求 比如我们有一个这样的需求,匹配出字符串里的第一个div标签:aa ...

  9. [AaronYang]那天有个小孩跟我说Js正则

    按照自己的思路学习Node.Js 随心出发.突破正则冷门知识点,巧妙复习正则常用知识点 标签:AaronYang  茗洋  Node.Js 正则 Javascript 本篇博客地址:http://ww ...

随机推荐

  1. 世界视频编码器大赛结果揭晓,腾讯V265编码器勇夺两项第一

    2019年10月22日,由莫斯科国立大学(Moscow State University)举办的MSU世界视频编码器大赛成绩揭晓, 腾讯内部开源协同的V265编码器再创佳绩,一举拿下PSNR(峰值信噪 ...

  2. 用PowerDesigner将SQL转pdm文件

    1.打开新建的pdm文件,File->Reverse Enginner->Databases 2.选择对应数据库(DBMS),点击确定,然后添加SQL文件 3.点击确定 注:如果DBMS没 ...

  3. 绘制UML图的工具

    目前在用processOn网站进行绘制:https://www.processon.com/ 学习其简单的入门教程: https://www.processon.com/support https:/ ...

  4. 修改Jupyter Notebook的默认打开路径

    一: (也可以直接将删除的部分修改成所要存储的文件路径,之后三个步骤就可以省去了) 二: 打开Windows的cmd,在cmd中输入jupyter notebook --generate-config ...

  5. 长乐国庆集训Day4

    T1 一道数论神题 题目 [题目描述] LYK有一张无向图G={V,E},这张无向图有n个点m条边组成.并且这是一张带权图,只有点权. LYK想把这个图删干净,它的方法是这样的.每次选择一个点,将它删 ...

  6. C++实现base64编解码

    Base64是常见的加密算法,代码实现了基于C++的对于base64的编码和解码. 其中注释掉的部分为编码部分,取消注释将解码部分注释掉即可实现编码,反之可以实现解码. #include <st ...

  7. python基础教程_查询价格

    少儿编程和数学是有这一定联系的,若是将编程弄好了,数学成绩也就会有所提高,今天就为大家来介绍一下一个关于数学的相关编程,现在我们就来看看吧! 题目描述 编程实现以下功能:查询水果的单价.有4种水果,苹 ...

  8. 【读书笔记】胡说IC

  9. 线程池及Executor框架

    1.为什么要使用线程池? ​ 诸如 Web 服务器.数据库服务器.文件服务器或邮件服务器之类的许多服务器应用程序都面向处理来自某些远程来源的大量短小的任务.请求以某种方式到达服务器,这种方式可能是通过 ...

  10. Typora基础

    Typora下载网址https://typora.io 一级标题 :# 空格 编写内容 二级标题 2*# 空格 内容 typora快捷键 ctrl+1 =一级标题 有序内容 1.+tab (Q旁边的t ...