js正则实现从一段复杂html代码字符串中匹配并处理特定信息

js正则实现从一段复杂html代码字符串中匹配并处理特定信息

问题:

现在要从一个复杂的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代码字符串中匹配并处理特定信息

时间: 2024-10-12 14:08:28

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

转:假设有一个字符串aabcad,请编写一段程序,去掉字符串中不相邻的重复字符。

假设有一个字符串aabcad,请编写一段程序,去掉字符串中不相邻的重复字符.即上述字串处理之后结果是为:aabcd; 分析,重点考查 char 与int 的隐式转换.程序如下: -(void) removeRepeat:(NSString *)aNum { NSMutableArray *mArr = [[NSMutableArray alloc]initWithCapacity:10]; for(int i = 0; i<aNum.length; i++) { [mArr addObject:

常用JS正则匹配函数

//校验用户名:只能输入1-30个字母 function isTrueName(s) { var patrn=/^[a-zA-Z]{1,30}$/; if (!patrn.exec(s)) return false return true } //校验密码:只能输入6-20个字母.数字.下划线 function isPasswd(s) { var patrn=/^(/w){6,20}$/; if (!patrn.exec(s)) return false return true } //校验普通

js正则验证手机号码有效性

通过js正则验证手机号码的有效性,方法如下: 验证130-139,150-159,180-189号码段的手机号码 <script type="text/javascript"> var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; if(!myreg.test($("#phone").val())) { alert('请输入有效的手机号码!'); return false; }

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

按照自己的思路学习Node.Js 随心出发.突破正则冷门知识点,巧妙复习正则常用知识点 本篇博客地址:http://www.cnblogs.com/AaronYang/p/3979710.html 开发准备(AaronYang原味)(看完加20分) 1你需要有个带开发者工具的浏览器,我这里用chrome浏览器 来这里学习,第一也为巩固自己的知识,二来真的很需要它.正则入门简单,高级理解了也简单,但是因为不经常用,所以过段时间也就忘了 跟正则相似作用的操作: 打开电脑,搜索文件,比如 *.doc

js 正则之 判断密码类型

原文:js 正则之 判断密码类型 今天没啥写的,就分享个思路吧.之前在群里讨论的时候,谢亮兄弟说判断密码是否是纯数字,纯字母之类的.如果用 if 或者 switch 写看着确实蛋疼,如果有 7, 8 条判断,那就老长一大段了.这个思路是我之前看 jQuery 源码的时候学到的,感觉用在这也不错.先来看代码吧. function test(str, re, msg) { var ret = str.match(re || /^(\d+)$|^([a-zA-Z]+)$|^([a-zA-Z].+)$|

浅谈 js 正则之 test 方法

原文:浅谈 js 正则之 test 方法 其实我很少用这个,所以之前一直没注意这个问题,自从落叶那厮写了个变态的测试我才去看了下这东西.先来看个东西吧. ? 1 2 3 4 5 var re = /\d/; console.log( re.test("1") ); console.log( re.test("1") ); console.log( re.test("1") ); console.log( re.test("1"

js 正则练习之语法高亮

原文:js 正则练习之语法高亮 学了几天正则,差不多该总结整理写成果了,之前就想写语法高亮匹配来着,不过水平不够,看着例子都不理解.今天就分析下 次碳酸钴 和 Barret Lee 语法高亮实现. 先说 Barret Lee 的这篇 <玩转正则之highlight高亮>之前看的时候只觉的神奇,特别是下面那个一步一步分开匹配的例子,更是霸气测漏,不过作者也说了,分开只是为了演示方便,可以很直观的看到这一步匹配了什么,不然一步到位匹配完成,你都不知道发生了什么就处理完毕了.来看下他的正则 (/^\

python第九十五天--js正则

定义正则表达式 /.../ 用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m 表示多行匹配 JS正则匹配时本身就是支持多行,此处多行匹配只是影响正则表达式^和$,m模式也会使用^$来匹配换行的内容) var pattern = /^Java\w*/gm; var text = "JavaScript is more fun than \nJavaEE or JavaBeans!"; result = pattern.exec(text) re

js正则验证方法大全

js正则验证方法大全 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83