关于页面标签的文章引发的JS正则表达式知识点复习~

原文1:Wanna Hire Tag Cloud in Your CNBlog, Huh?

原文2:CNBlog Tag Cloud Cont., Optimising Your Tag Cloud

 

本来是想根据这两篇原文写一些JS脚本在CSDN博客中的，不过后来发现CSDN的博客文章提交后会自动删除JS代码，所以就分析下上面两篇文章中的一些JS基础知识点，这些也都是JS正则表达式的精华。

 

var regex = /<a(.*?<//a>).*?/((/d+)/)/g;

 

这个正则表达式匹配的HTML代码是：

 

1	<div id="MyTag">

2

...

3	<a href="http://www.cnblogs.com/misaxi/tag/ASP.NET+MVC/">ASP.NET MVC</a>(4)

4

...

5

</div>

 

     1.上面这个正则表达式使用了括号分组，match()返回的是一个数组，如果匹配成功那么这个数组是匹配到的字符串数组列表，数组的第一个元素是匹配到的整个字符串,比如<a href="http://www.cnblogs.com/misaxi/tag/ASP.NET+MVC/">ASP.NET MVC</a>,然后数组的第二个元素开始就是根据括号的分组从最左边的括号到最右边括号匹配到的内容，也就是说第二个元素是(.*?<//a>):href="http://www.cnblogs.com/misaxi/tag/ASP.NET+MVC/",第三个元素是(/d+):4.

      只所以要分组，其实是为：

      result.push(matches[i].replace(regex,

                        function(a,link,count){

                   var fontSize = 0.8 + (count/10.0);

                   if(fontSize>2){

                         fontSize=2;

                   }

                   return '<a style="font-size: ' + fontSize + 'em;"' + link;

        }));

 

   这个replace的第二个参数是一个函数，这个函数中的参数a,link,count其实就是上面match匹配到的数组中的元素，具体请看:javascript中replace()函数用法小谈

 

   2.当然这里还有个最小限定符的知识点，你看 /<a(.*?<//a>).*?/((/d+)/)/g;中的.*?,众所周知，.*是匹配非/n字符的零次或者多次，那为什么还要加?号呢？?除了有匹配零次或者一次的意思外，还有非贪婪匹配的意思.啥意思呢？看下面例子

   字符串:<H1>Chapter 1 – Introduction to Regular Expressions</H1>

   如果正则表达式:/<.*>/,那么匹配的结果会变成<H1>Chapter 1 – Introduction to Regular Expressions</H1>

   如果正则表达式:/<.*?>/,那么匹配的结果会变成<H1>

   原因看:JS 限定符