连山网站建设,asp源码下载,地推平台招代理,佛系wordpress博客文章目录一. 背景二. 思路与过程1. 正则表达式中需要限定script开头与结尾2. 增加标签格式的限定3. 不限制script首尾的内部内容4. 中间的内容不能出现闭合的情况三. 结果与代码四. 正则辅助工具一. 背景
之前要对学生提交的html代码进行检查#xff0c;在获…
文章目录一. 背景二. 思路与过程1. 正则表达式中需要限定script开头与结尾2. 增加标签格式的限定3. 不限制script首尾的内部内容4. 中间的内容不能出现闭合的情况三. 结果与代码四. 正则辅助工具一. 背景
之前要对学生提交的html代码进行检查在获取了学生提交的html代码文本后需要使用正则去截取内部的script标签内容做进一步的检查。
假设得到html文本如下不是代码我们要得到全部的script标签内容并提取出来。
看上去不难但是实际操作起来有一定的坑最大的问题是学生可能在标签内部写的代码里也出现了“script”或“script”文本。就如上方所截图的两个蓝色横线。
二. 思路与过程
为了解决第一个蓝线问题出现“script”文本 我们需要依靠html中script标签的闭合特性来实现排除。
所以我们得到了第一个结论
1. 正则表达式中需要限定script开头与结尾
第一个正则
script[^]*\/script这里需要注意
闭合标签中/符号需要通过\进行转义末尾的三个参数 忽略大小写 - i多行模式 - m全局匹配 - g
但是学生仍有可能写成script (标签内部有空格) 所以我们需要更进一步限定标签
2. 增加标签格式的限定
第二个表达式
script[^]*\/script这意味着只要script 接下来的字符包括空格没到闭合处就一直囊括进去。
但是这样不能匹配到首尾scriptxxx/script里面有字符xxx的情况所以我们还需要放开对里面字符的限制。这一步是最难的一步。
3. 不限制script首尾的内部内容
我们试着不限制内部的字符可以得到第三个表达式
script[^]*[\w\W]*\/script但是这样会带来新的问题所有的字符都被囊括进去无法匹配到所有的标签。 如果在两个script内部增加html代码那也是不行的。
为了分段获取也为了解决内容中出现script的问题我们限定
4. 中间的内容不能出现闭合的情况
我们这么理解中间的内容要么不能出现闭合,如果出现了它后面跟随的就不能是/script.
最终正则如下
/script[^]*([^]|(?!\/script))*\/script/gmi三. 结果与代码
使用最后得出的正则我们得到如下结果
在实际应用中我们得到这些标签内容后可以进一步刨去两个首尾标签。
// 这是js的代码
let str document.body.innerHTML
// 获取script标签内的内容
let reg /script[^]*([^]|(?!\/script))*\/script/gmi
let res str.match(reg)
console.log(匹配的结果:, res)
// 如果具有script标签
if (res ! null) {res.forEach((ele) {let startIndex ele.indexOf()let endIndex ele.lastIndexOf()ele ele.slice(startIndex 1, endIndex)console.log(ele) //每一段script标签的内容})
}下方给出整合的测试代码。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh1获取script标签内容/h1scriptlet script document.getElementsByTagName(h1)[0]console.log(script)/scriptscriptconsole.log(this is the second script tag)/scriptscriptlet str document.body.innerHTMLconsole.log(str);// 获取script标签内的内容let reg /script[^]*([^]|(?!\/script))*\/script/gmilet res str.match(reg)console.log(匹配的结果:, res)// 如果具有script标签if (res ! null) {res.forEach((ele) {let startIndex ele.indexOf()let endIndex ele.lastIndexOf()ele ele.slice(startIndex 1, endIndex)console.log(ele) //每一段script标签的内容})}/script
/body/html四. 正则辅助工具
正则表达式可视化工具正则表达式在线测试
