[ 前端工程 ] 正则匹配script脚本节点.

前端之家收集整理的这篇文章主要介绍了[ 前端工程 ] 正则匹配script脚本节点.前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
最近很长一段时间一直在关注前端工程方面的问题。
思考上线之后文件合并的问题。

根据个人思考,合并部署文件主要分以下步骤:

//1 读取文件获取字符流
//2 扫描字符串,进行正则匹配,读取中需要合并的文件路径,放入数组
//3 根据数组,读取文件,对不同的文件进行合并
//4 合并需要用到文本摘要算法
//5 这里要注意,针对css 文件中的背景图片同样需要进行匹配,这样在上线可以解决缓存的问题。
//6 写入新文件
//7 在html文件中,加入新的文件路路径

其中麻烦一点,可能就是扫描扫script问题。

自己琢磨得出两个正则匹配文件script节点如下,也算是对正则功力的一种提升吧:

var reg = /<script[\s]+[^>]+=[\s]*[^>]+><\/script>/;
var reg2 = /<script[\s]+(?:[^>]+=[\s]*[^>]+)*(?:src[\s]*=[\s]*['"]([^>]+(?:\.js))['"])><\/script>/g;

第一个正则仅仅只是匹配<script>节点,并且包含属性

第二个正则相对第一个要更加的准确,匹配script节点中,是否存在src属性,如不存在,那么可能只是script片段,并非外部引用的
js文件。当然这里还存在一个问题,type并没有做javascript匹配,毕竟可能存在前端模版类的js,如type='text/html'.

这里需要注意几点:

1 [\s]+ 表示必须存在空格,如 <script后面,不能直接跟属性,必须有空格隔开.

2 ?: 表示非捕捉匹配,是为了让 $1能正确的匹配到自己想到的元素,这里我更加想得到文件的具体路径。所以第一个括号,就不匹配了,

方便$1给直接获取,同时不捕捉也能提升效率。

至于其它的步骤,采用nodejs皆可以实现。

偶有所悟,谨防忘记。

原文链接:https://www.f2er.com/regex/360226.html

猜你在找的正则表达式相关文章