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

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

news 2025/12/15 22:14:47

文章目录

      • 一. 背景
      • 二. 思路与过程
        • 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

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/12/9 0:39:14

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/12/9 0:43:27

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2025/12/13 0:29:47

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2025/12/11 10:24:33

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/12/13 2:36:48

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/12/13 23:42:56

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2025/12/5 2:22:29

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

编程新知 2025/10/4 21:24:40

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

编程新知 2025/7/5 19:39:42