问题:

现在要从一个复杂的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. 解决chrome浏览器插件开发者模式每次启动要确认弹出框的问题

    在日常工作中,我们经常会用到一些浏览器插件,有些插件因为没上架到浏览器的应用商店,只能以开发者模式运行,但是chrome浏览器出了限制,每次重新启动浏览器的时候,就会弹出该插件是否要禁止运行的对话框, ...

  2. Locust 性能测试工具安装使用说明

    1. 介绍     它是一个开源性能测试工具.使用 Python 代码来定义用户行为.用它可以模拟百万计的并发用户访问你的系统. 性能工具对比 LoadRunner 是非常有名的商业性能测试工具,功能 ...

  3. oracle 在列名后的 (+)是什么意思,如何转换为mysql

    外连接的意思select *from a,bwhere a.id=b.id(+)意思就是返回a,b中匹配的行 和 a中有但是b中没有的行. 参考https://www.cnblogs.com/Aaro ...

  4. RestTemplate相关组件:ClientHttpRequestInterceptor【享学Spring MVC】

    每篇一句 做事的人和做梦的人最大的区别就是行动力 前言 本文为深入了解Spring提供的Rest调用客户端RestTemplate开山,对它相关的一些组件做讲解. Tips:请注意区分RestTemp ...

  5. Golang转义字符

    Golang常见的转义字符(escape char) \t    一个制表位,实现对齐的功能 \n   换行符 \\    一个\ \"    一个" \r    一个回车  fm ...

  6. RabbitMQ入门详解以及使用

    目的: RabbitMQ简介 RabbitMQ安装及使用 Centos安装 Docker安装(今天选择Docker安装方法) RabbitMQ快速入门 交换机 RabbitMQ简介 各大主流中间件对比 ...

  7. yii2 AppAsset.php 和 assetManager 组件

    01) 背景:Yii2中使用了 AdminLTE 3.0.0  后框架自带的bootstrap.css 与 admin样式有冲突,需要去掉 bootstrap.css 在 backend/config ...

  8. 在local模式下的spark程序打包到集群上运行

    一.前期准备 前期的环境准备,在Linux系统下要有Hadoop系统,spark伪分布式或者分布式,具体的教程可以查阅我的这两篇博客: Hadoop2.0伪分布式平台环境搭建 Spark2.4.0伪分 ...

  9. 计算几何-凸包算法 Python实现与Matlab动画演示

    凸包算法是计算几何中的最经典问题之一了.给定一个点集,计算其凸包.凸包是什么就不罗嗦了 本文给出了<计算几何——算法与应用>中一书所列凸包算法的Python实现和Matlab实现,并给出了 ...

  10. MVC中根据后台绝对路径读取图片并显示在IMG中

    数据库存取图片并在MVC3中显示在View中 根据路径读取图片: byte[] img = System.IO.File.ReadAllBytes(@"d:\xxxx.jpg"); ...