[ 前端工程 ] 正则匹配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皆可以实现。

偶有所悟,谨防忘记。

相关文章

jquery.validate使用攻略(表单校验) 目录 jquery.validate...
/\s+/g和/\s/g的区别 正则表达式/\s+/g...
自整理几个jquery.Validate验证正则: 1. 只能输入数字和字母...
this.optional(element)的用法 this.optional(element)是jqu...
jQuery.validate 表单动态验证 实际上jQuery.validate提供了...
自定义验证之这能输入数字(包括小数 负数 ) &lt;script ...