由正则表达式html或xml标签配对说起【括号编组和正负向预查】

最新推荐文章于 2022-03-29 16:52:17 发布

javabaidu

最新推荐文章于 2022-03-29 16:52:17 发布

阅读量211

点赞数

分类专栏： JavaScript 文章标签：正则表达式 xml javascript ViewUI

本文链接：https://blog.csdn.net/javabaidu/article/details/84599267

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

经常会查找xml或HTML标签里的内容，如果着急用，可以使用下面的正则和方式查找：
使用正则表达式： reg = /<div>[color=red][b]([/b][/color][\s\S]*[color=red][b])[/b][/color]</div>/ig


    /**
     * 
     * @param {type} str
     * @param {type} tag
     * @returns {array}或null 标签和内容数组
     */
    function tag(str,tagName){
        //正则表达式 <div>([\s\S]*)</div>
        var exp = '<'+tagName+'>([\\s\\S]*)<\/'+tagName+'>';
        console.log(exp);
        var reg = new RegExp(exp,'ig');
        var arr = str.match(reg);
        return arr;
    }


/**

只返回标签内容或null
**/
    function tagText(str,tagName){
        var exp = '<'+tagName+'>([\\s\\S]*)<\/'+tagName+'>';
        console.log(exp);
        var reg = new RegExp(exp,'ig');
        var arr = str.match(reg);
        if(arr!=null){
            return RegExp.$1;
        }
        return null;
    }

    var str = "<html><body><div>测试div \n</div><body><html>";

    var arr = tag(str,'div');
    console.log(arr[0]); 

    var text = tagText(str,'div');
    console.log(text);

输出结果


Chrome 34.0.1847 (Windows 7) LOG: '<div>([\s\S]*)</div>'

Chrome 34.0.1847 (Windows 7) LOG: '<div>测试div 
</div>'

Chrome 34.0.1847 (Windows 7) LOG: '<div>([\s\S]*)</div>'

Chrome 34.0.1847 (Windows 7) LOG: '测试div 
'

两个函数的区别：[color=red][b]RegExp.$1;[/b][/color]

这两个函数使用了正则表的式的括号进行分组匹配，很方便，而且节省了大量代码。

正则表达式的括号分组功能，有四种写法

1、(pattern)
2、(?:pattern)
3、(?=pattern)
4、(?!pattern)

我们使用的是第一种方式进行匹配的，这种写法与没有括号的写法功能基本上是一样的
如：

var reg=/[\S]+ [\S]+/ig
和
var reg = /([\S]+) [\S]+/ig;

 var str = 'Windows 95 是个比较老的系统。';
 var arr = str.match(reg);
 console.log('匹配结果：'+arr[0]);
 console.log('捕获分组：'+RegExp.$1);

输出为：
Chrome 34.0.1847 (Windows 7) LOG: '匹配结果：Windows 95'

Chrome 34.0.1847 (Windows 7) LOG: '捕获分组：Windows'

括号的用途在于，模式匹配上以后，可以提取括号分组里的内容。如从匹配的
'Windows 95'提取'Windows'，括号括起来后就可以用RegExp.$1提取括号里的
内容，如果匹配多个，可以用RegExp.$1...$99提取。

([\S]+)只是产生了一个有趣的副产品,导致匹配的内容被捕获供今后使用。
2、3、4种写法全部丢弃了副产品。

2、(?:pattern)意思是丢弃副产品，括号里匹配的内容不再存储和使用。

var str = 'Windows 95 是个比较老的系统。';

   var reg = /(?:[\S]+) [\S]+/ig; 

   var arr = str.match(reg);
   console.log('匹配结果：'+arr[0]);
   console.log('捕获分组：'+RegExp.$1);

Chrome 34.0.1847 (Windows 7) LOG: '匹配结果：Windows 95'

Chrome 34.0.1847 (Windows 7) LOG: '捕获分组：'

分析：
副产品直接丢弃

3、(?=pattern)
分三步操作
1、找到和正则表达式完全匹配的内容。2、捕获括号前面的内容。3、丢弃括号里的副产品。


 var str = 'Windows95和Windows98是比较老的系统。Windows2000是新系统！';

 var reg = /Windows(?=98|95)/ig;

   var arr = str.match(reg);
   for(var i=0;i<arr.length;i++){
       console.log('匹配结果'+i+'：'+arr[i]);  
   }
   console.log('捕获分组：'+RegExp.$1); 

Chrome 34.0.1847 (Windows 7) LOG: '匹配结果1：Windows'

Chrome 34.0.1847 (Windows 7) LOG: '匹配结果2：Windows'

Chrome 34.0.1847 (Windows 7) LOG: '捕获分组：'

分析：
1、找到Windows95和Windows98
2、捕获两个Windows
3、丢弃括号里的副产品98和95

4、(?!pattern)负向预查
1、找到和正则表达式括号外的表达式完全匹配的内容。2、捕获括号前面的内容。3、丢弃括号里的副产品。

var str = 'Windows95和Windows98是比较老的系统。Windows2000是新系统！';

 var reg = /Windows(?!98|95)/ig; 

   var arr = str.match(reg);
   for(var i=0;i<arr.length;i++){ 
       console.log('匹配结果'+i+'：'+arr[i]);  
   }
   console.log('捕获分组：'+RegExp.$1); 

Chrome 34.0.1847 (Windows 7) LOG: '匹配结果0：Windows'

Chrome 34.0.1847 (Windows 7) LOG: '捕获分组：'

分析：
1、找到Windows2000
2、捕获1个Windows
3、丢弃括号里的副产品2000

另一个负向预查的例子


//取得script里的网址"http://www.baidu.com"

 var str = '<script src="http://www.baidu.com"><script>';
        var reg = /(?!src=)"[\S]*"/; 
        var match = str.match(reg);
        console.log(match[0]);
输出：
"http://www.baidu.com"