将具有特殊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然后每次生成页面时根据等号对来生成图片，所以在存文章之前需要对其进行一次编译，希望有类似需求的朋友可以用上。