日期:2014-05-16  浏览次数:20640 次

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;
}

?

知识点大梳理

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

1、js正则表达

在编写正则的时候,如果使用RegExp对象,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)