将具有特殊class名img标签替换成[img][/img]标签--javascript正则表达式实践

在项目中，可能有时候需要将一些特殊的东西加一个特别的属性，或者一个特殊的Class。如下：

<!-- 第一种写法 -->
<img src="abc.jpg" fid="13696" alt="abc" />

<!-- 第二种写法 -->
<img src="abc.jpg" class="system_fid_13696" alt="abc" />

很明显，前者不遵循W3C标准。所以，一般情况下我们优先考虑后者。

OK，接下来，我们要在存储页面的时候将所有的图片都替换成[img]13696[/img]这种方式嵌入页面中，用正则表达式完成如下：

var reg =  /<img(?:\s*\w*?\s*=\s*".+?")*?\s*class\s*=\s*".*?system_fid_(\d*).*?"(?:\s*\w*?\s*=\s*".+?")*\s*\/?>/ig;  
    
var str = '我就是<img class="abc system_fid_1532" src="URL"/>传说中的图片了<img class="abc system_fid_1932 dds" src="URL"/>哎。';   
document.write(str.replace(reg,'[img]$1[/img]')+'<br />');  

 // 输出结果：我就是[img]1532[/img]传说中的图片了[img]1932[/img]哎。

上面正则表达式中，特别要注意的是：  .*?   这个，如果没有后面那个问号，正则表达式的贪婪匹配将会直接找到最后一个  />  字符串进行匹配，最终导致的结果是： 

我就是[img]1932[/img]哎。

写这篇文章主要是由于之前项目里面存储文章时，图片时不存图片的绝对路径，只存id然后每次生成页面时根据等号对来生成图片，所以在存文章之前需要对其进行一次编译，希望有类似需求的朋友可以用上。