当前位置： 首页 > news >正文

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

news 2026/2/5 0:42:43

文章目录

      • 一. 背景
      • 二. 思路与过程
        • 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 接下来的字符（包括空格）没到闭合>处，就一直囊括进去。

但是这样不能匹配到首尾<script>xxx</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 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.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>

四. 正则辅助工具

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

相关文章：

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

文章目录一. 背景二. 思路与过程1. 正则表达式中需要限定<script>开头与结尾2. 增加标签格式的限定3. 不限制<script>首尾的内部内容4. 中间的内容不能出现闭合的情况三. 结果与代码四. 正则辅助工具一. 背景 之前要对学生提交的html代码进行检查&#xff0c;在获…...

编程日记 2023/2/12 9:24:35

有 9 种springMVC常用注解高频使用，来了解下？

文章目录1、Controller2、RequestMapping2.1 RequestMapping注解有六个属性2.1.1 value2.1.2 method2.1.3 consumes2.1.4 produces2.1.5 params2.1.6 headers2.2 Request Mapping&#xff08;"/helloword/?/aa"&#xff09;的Ant路径&#xff0c;匹配符2.3 Request …...

编程日记 2023/2/12 9:22:15

【ES6】掌握Promise和利用Promise封装ajax

&#x1f4bb; 【ES6】掌握Promise和利用Promise封装ajax &#x1f3e0;专栏&#xff1a;JavaScript &#x1f440;个人主页&#xff1a;繁星学编程&#x1f341; &#x1f9d1;个人简介&#xff1a;一个不断提高自我的平凡人&#x1f680; &#x1f50a;分享方向&#xff1a;目…...

编程日记 2023/2/12 9:21:07

REDIS-持久化方案

我们知道redis是内存数据库&#xff0c;它的数据是存储在内存中的&#xff0c;我们知道内存的一个特点是断电数据就丢失&#xff0c;所以redis提供了持久化功能&#xff0c;可以将内存中的数据状态存储到磁盘里面&#xff0c;避免数据丢失。 Redis持久化有三种方案&#xff0c;…...

编程日记 2023/2/12 9:20:01

五、Java框架之Maven进阶

黑马课程 文章目录1. 分模块开发1.1 分模块开发入门案例示例&#xff1a;抽取domain层示例&#xff1a;抽取dao层1.2 依赖管理2. 聚合和继承2.1 聚合概述聚合实现步骤2.2 继承 dependencyManagement3. 属性管理3.1 依赖版本属性管理3.2 配置文件属性管理&#xff08;了解&#…...

编程日记 2023/2/12 9:18:54

1.前言【Java面试第三季】

1.前言【Java面试第三季】前言推荐1.前言00_前言闲聊和课程说明本课程介绍目前考核的变化趋势vcr集数和坚持学长谷粉面试题复盘反馈最后前言 2023-2-1 12:30:05 以下内容源自 【尚硅谷Java大厂面试题第3季&#xff0c;跳槽必刷题目必扫技术盲点&#xff08;周阳主讲&#xff0…...

编程日记 2023/2/12 9:16:35

06分支限界法

文章目录八数码难题普通BFS算法全局择优算法&#xff08;A算法&#xff0c;启发式搜索算法&#xff09;单源最短路径问题装载问题算法思想&#xff1a;队列式分支限界法优先队列式分支限界法布线问题最大团问题批处理作业调度问题分支限界法与回溯法的区别&#xff1a; &#x…...

编程日记 2023/2/12 9:15:25

Docker Compose编排

一、概念1、Docker Compose是什么Docker Compose的前身是Fig&#xff0c;它是一个定义及运行多个Docker容器的工具通过 Compose&#xff0c;不需要使用shell脚本来启动容器&#xff0c;而使用 YAML 文件来配置应用程序需要的所有服务然后使用一个命令&#xff0c;根据 YAML 的文…...

编程日记 2023/2/12 9:13:11

Docker进阶 - 11. Docker Compose 编排服务

注&#xff1a;本文只对一些重要步骤和yml文件进行一些讲解&#xff0c;其他的具体程序没有记录。 目录 1. 原始的微服务工程编排(不使用Compose) 2. 使用Compose编排微服务 2.1 编写 docker-compose.yml 文件 2.2 修改并构建微服务工程镜像 2.3 启动 docker-compose 服务…...

编程日记 2023/2/12 9:12:05

福利篇2——嵌入式岗位笔试面试资料汇总（含大厂笔试面试真题）

前言 汇总嵌入式软件岗位笔试面试资料，供参考。 文章目录 前言一、公司嵌入式面经1、小米1）面试时长2）面试问题2、科大讯飞1）面试时长2）面试题目3、其余公司面经二、嵌入式笔试面试资料（全）三、嵌入式岗位薪资报告四、硬件岗位薪资报告一、公司嵌入式面经 1、小米 1）…...

编程日记 2023/2/12 9:10:59

[ubuntu]LVM磁盘管理

LVM是 Logical Volume Manager&#xff08;逻辑卷管理&#xff09;的简写&#xff0c;是Linux环境下对磁盘分区进行管理的一种机制&#xff0c;由Heinz Mauelshagen在Linux 2.4内核上实现。LVM可以实现用户在无需停机的情况下动态调整各个分区大小。1.简介 ​ LVM本质上是一个…...

编程日记 2023/2/12 9:09:51

开源流程引擎Camunda

开源流程引擎Camunda 文章作者&#xff1a;智星 1.简介 Camunda是一个轻量级的商业流程开源平台&#xff0c;是一种基于Java的框架&#xff0c;持久层采用Mybatis&#xff0c;可以内嵌集成到Java应用、SpringBooot应用中&#xff0c;也可以独立运行&#xff0c;其支持BPMN&a…...

编程日记 2023/2/12 9:08:43

【PTA Advanced】1155 Heap Paths（C++）

目录 题目 Input Specification: Output Specification: Sample Input 1: Sample Output 1: Sample Input 2: Sample Output 2: Sample Input 3: Sample Output 3: 思路 代码 题目 In computer science, a heap is a specialized tree-based data structure that s…...

编程日记 2023/2/12 9:06:31

Educational Codeforces Round 129 (Rated for Div. 2)

A. Game with Cards. 题目链接 题目大意&#xff1a; Alice和Bob玩卡牌。Alice有n张&#xff0c;Bob有m张。第一轮选手出一张数字卡牌。第二轮另一个选手要选择一张比他大的&#xff0c;依此类推。谁没有牌可出则输。问Alice和Bob分别先手时&#xff0c;谁赢&#xff1f;输出…...

编程日记 2023/2/12 9:03:10

[数据库]表的增删改查

●&#x1f9d1;个人主页:你帅你先说. ●&#x1f4c3;欢迎点赞&#x1f44d;关注&#x1f4a1;收藏&#x1f496; ●&#x1f4d6;既选择了远方&#xff0c;便只顾风雨兼程。 ●&#x1f91f;欢迎大家有问题随时私信我&#xff01; ●&#x1f9d0;版权&#xff1a;本文由[你帅…...

编程日记 2023/2/12 9:00:54

分享77个JS菜单导航，总有一款适合您

分享77个JS菜单导航&#xff0c;总有一款适合您 77个JS菜单导航下载链接&#xff1a;https://pan.baidu.com/s/1e_384_1KC2oSTDy7AaD3og?pwdzkw6 提取码&#xff1a;zkw6 Python采集代码下载链接&#xff1a;https://wwgn.lanzoul.com/iKGwb0kye3wj class ChinaZJsSeleni…...

编程日记 2023/2/12 8:57:31

kubernetes -- 核心组件介绍以及组件的运行流程

常用组件大白话说 如果想要官方的&#xff0c;详细的信息&#xff0c;请看官方文档。 https://kubernetes.io/zh-cn/docs/concepts/overview/components/ 现在介绍一些核心的概念&#xff1a; etcd&#xff1a;存储所有节点的信息&#xff0c;节点上部署的容器信息等都存在数…...

编程日记 2023/2/12 8:55:13

微信小程序Springboot短视频分享系统

3.1小程序端 用户注册页面&#xff0c;输入用户的个人信息点击注册即可。 注册完成后会返回到登录页面&#xff0c;用户输入自己注册的账号密码即可登录成功 登录成功后我们可以看到有相关的视频还有视频信息&#xff0c;我的信息等。 视频信息推荐是按照点击次数进行推荐的&am…...

编程日记 2023/2/12 8:54:01

排序算法学习

文章目录前言一、直接插入排序算法二、折半插入排序算法三、2路插入排序算法四、快速排序算法学习前言 算法是道路生涯的一个巨大阻碍。今日前来解决这其中之一&#xff1a;有关的排序算法&#xff0c;进行实现以及性能分析。 一、直接插入排序算法 插入排序算法实现主要思想…...

编程日记 2023/2/12 8:51:41

常见漏洞之 struts2+ jboss

数据来源 本文仅用于信息安全的学习&#xff0c;请遵守相关法律法规&#xff0c;严禁用于非法途径。若观众因此作出任何危害网络安全的行为&#xff0c;后果自负&#xff0c;与本人无关。 01 Struts2相关介绍 》Struts2概述 》Struts2历史漏洞&#xff08;1&#xff09; 》…...

编程日记 2023/2/12 8:50:23

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2026/1/30 16:12:20

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/28 8:17:53

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2026/2/3 15:24:36

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2026/1/30 15:27:25

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...

编程新知 2026/1/23 10:41:41

基于单片机的宠物屋智能系统设计与实现（论文+源码）

本设计基于单片机的宠物屋智能系统核心是实现对宠物生活环境及状态的智能管理。系统以单片机为中枢&#xff0c;连接红外测温传感器&#xff0c;可实时精准捕捉宠物体温变化&#xff0c;以便及时发现健康异常&#xff1b;水位检测传感器时刻监测饮用水余量&#xff0c;防止宠物…...

编程新知 2026/1/26 12:38:34

【实施指南】Android客户端HTTPS双向认证实施指南

&#x1f510; 一、所需准备材料 证书文件&#xff08;6类核心文件&#xff09; 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...

编程新知 2025/9/15 14:56:23

从零手写Java版本的LSM Tree （一）：LSM Tree 概述

&#x1f525; 推荐一个高质量的Java LSM Tree开源项目&#xff01; https://github.com/brianxiadong/java-lsm-tree java-lsm-tree 是一个从零实现的Log-Structured Merge Tree&#xff0c;专为高并发写入场景设计。 核心亮点&#xff1a; ⚡ 极致性能&#xff1a;写入速度超…...

编程新知 2026/2/4 18:21:41

CppCon 2015 学习:REFLECTION TECHNIQUES IN C++

关于 Reflection&#xff08;反射&#xff09; 这个概念&#xff0c;总结一下&#xff1a; Reflection&#xff08;反射&#xff09;是什么&#xff1f; 反射是对类型的自我检查能力&#xff08;Introspection&#xff09; 可以查看类的成员变量、成员函数等信息。反射允许枚…...

编程新知 2025/12/1 1:27:24