【正则表达式】获取html代码文本内所有<script>标签内容

这篇具有很好参考价值的文章主要介绍了【正则表达式】获取html代码文本内所有<script>标签内容。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一. 背景

之前要对学生提交的html代码进行检查,在获取了学生提交的html代码文本后,需要使用正则去截取内部的script标签内容做进一步的检查。

假设得到html文本如下(不是代码),我们要得到全部的script标签内容并提取出来。
js 正则提前指定script的属性内容,# JavaScript及框架,正则表达式,html,前端

看上去不难,但是实际操作起来有一定的坑,最大的问题是学生可能在标签内部写的代码里也出现了“script”或“<script>”文本。就如上方所截图的两个蓝色横线。

二. 思路与过程

为了解决第一个蓝线问题(出现“script”文本)
我们需要依靠html中script标签的闭合特性来实现排除。

所以我们得到了第一个结论:

1. 正则表达式中需要限定<script>开头与结尾

第一个正则:

<script[^>]*><\/script>

js 正则提前指定script的属性内容,# JavaScript及框架,正则表达式,html,前端

这里需要注意:

  • 闭合标签中/符号需要通过\进行转义
  • 末尾的三个参数
    • 忽略大小写 - i
    • 多行模式 - m
    • 全局匹配 - g

但是学生仍有可能写成<script >(标签内部有空格)
所以我们需要更进一步限定标签:

2. 增加标签格式的限定

第二个表达式:

<script[^>]*><\/script>

js 正则提前指定script的属性内容,# JavaScript及框架,正则表达式,html,前端
这意味着只要<script 接下来的字符(包括空格)没到闭合>处,就一直囊括进去。

但是这样不能匹配到首尾<script>xxx</script>里面有字符xxx的情况,所以我们还需要放开对里面字符的限制。这一步是最难的一步。

3. 不限制<script>首尾的内部内容

我们试着不限制内部的字符,可以得到第三个表达式:

<script[^>]*>[\w\W]*<\/script>

js 正则提前指定script的属性内容,# JavaScript及框架,正则表达式,html,前端
js 正则提前指定script的属性内容,# JavaScript及框架,正则表达式,html,前端
但是,这样会带来新的问题,所有的字符都被囊括进去,无法匹配到所有的标签。

js 正则提前指定script的属性内容,# JavaScript及框架,正则表达式,html,前端
如果在两个script内部增加html代码,那也是不行的。

为了分段获取,也为了解决内容中出现<script>的问题,我们限定:

4. 中间的内容不能出现闭合的情况

我们这么理解:中间的内容,要么不能出现闭合<,如果出现了<,它后面跟随的就不能是/script.

最终正则如下:

/<script[^>]*>([^<]|<(?!\/script))*<\/script>/gmi

js 正则提前指定script的属性内容,# JavaScript及框架,正则表达式,html,前端

三. 结果与代码

使用最后得出的正则,我们得到如下结果:
js 正则提前指定script的属性内容,# JavaScript及框架,正则表达式,html,前端

在实际应用中,我们得到这些标签内容后可以进一步刨去两个首尾标签。

// 这是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标签的内容
    })
}

下方给出整合的测试代码。文章来源地址https://www.toymoban.com/news/detail-795868.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>获取script标签内容</h1>
    <script>
        let script = document.getElementsByTagName('h1')[0]
        console.log(script)
    </script>
    <script>
        console.log("this is the second <script> tag")
    </script>
    <script>
        let str = document.body.innerHTML
        console.log(str);
        // 获取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标签的内容
            })
        }
    </script>
</body>

</html>

四. 正则辅助工具

  1. 正则表达式可视化工具
  2. 正则表达式在线测试

到了这里,关于【正则表达式】获取html代码文本内所有<script>标签内容的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 正则表达式与文本处理器

    文本处理器三剑客:grep(查找) sed  awk 正则表达式: 由一类特殊字符以及文本字符所编写的一种模式,处理文本当中的内容 其中的一些字符不表示字符的字面含义,这些字符表示控制或者通配的功能 通配符: 匹配文件名和目录名,不能匹配文件内容 正则表达式有两种匹

    2024年02月16日
    浏览(44)
  • 2.1 python文本处理-正则表达式

    标准库模块 re 模块方法 # 将正则表达式样式编译成一个正则对象。一般用于多次使用正则对象的场景 re.compile( pattern ) # 扫描string字符串并查找符合patten样式的第一个位置,返回对应的 Match 结果,否则返回 None re.search(patten, string) # 如果  string  开头的零个或多个字符与正则

    2024年02月01日
    浏览(55)
  • Linux文本处理工具和正则表达式

    Linux文本处理工具和正则表达式 cat 最常用的文件查看命令;当不指明文件或者文件名为一杠’-\\\'时,读取标准输入。 more 默认将多行文本满屏输出,只允许向文本末尾翻页(空格键满屏翻页;回车键单行翻页),阅读到文末自动退出。 用法 一般使用管道传给more来阅读内容超过

    2024年02月13日
    浏览(59)
  • Python 正则表达式:强大的文本处理工具

    正则表达式是一种强大的文本匹配和处理工具,它可以用来在字符串中查找、替换和提取符合某种规则的内容。在Python中,使用re模块可以轻松地操作正则表达式,它提供了丰富的功能和灵活的语法。 正则表达式在许多场景中都非常有用。以下是一些常见的应用场景: 数据清

    2024年02月09日
    浏览(55)
  • 正则表达式和文本三剑客题型练习

    ​ 1、显示/etc/passwd文件中以bash结尾的行; 解释:使用 grep 工具来搜索文件 /etc/passwd 中匹配模式 \\\'bash$\\\' 的行。 bash$ 是一个正则表达式,其中 $ 表示行结尾。因此, \\\'bash$\\\' 匹配以 bash 结尾的行。 运行结果: ​ 2、找出\\\"netstat  -tan”命令的结果中,以‘LISTEN’后跟0或多个空白字

    2024年02月06日
    浏览(43)
  • 正则表达式与正则可视化工具:解密文本处理的利器

    在计算机科学和软件开发领域,正则表达式是一种强大而灵活的文本处理工具。然而,对于初学者来说,正则表达式的语法和规则可能会显得晦涩难懂。为了帮助初学者更好地理解和学习正则表达式,正则可视化工具应运而生。本文将介绍正则表达式的基本概念、语法和应用

    2024年02月19日
    浏览(53)
  • 【23JavaScript 正则表达式】深入解析JavaScript正则表达式:基础概念、常用方法和实例详解,轻松掌握强大的文本模式匹配工具

    正则表达式是一种强大的文本模式匹配工具,用于在字符串中搜索和操作特定的文本模式。在JavaScript中,正则表达式提供了一种灵活的方式来处理字符串操作。 在JavaScript中,可以通过使用字面量表示法或RegExp对象来创建正则表达式。 字面量表示法 RegExp对象 JavaScript中的正则

    2024年02月08日
    浏览(61)
  • Shell 正则表达式及综合案例及文本处理工具

     目录 一、常规匹配 二、常用特殊字符 三、匹配手机号 四、案例之归档文件 五、案例之定时归档文件 六、Shell文本处理工具 1. cut工具 2. awk工具 一串不包含特殊字符的正则表达式匹配它自己 例子,比如说想要查看密码包含root字符串的,可以这样写 cat /etc/passwd | grep root 特

    2024年01月17日
    浏览(48)
  • Python正则表达式提取文本中的IP地址

    Python正则表达式提取文本中的IP地址 在Python中,使用正则表达式可以方便地从文本中抽取符合规则的字符串。其中,IP地址是一个常见的需要抽取的内容之一。IP地址通常由四段数字组成,每段数字的取值范围是0~255。下面将演示如何在Python中使用正则表达式抽取文本中的IP地

    2024年02月16日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包