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

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

news 2025/7/7 17:51:50

文章目录

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

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/7/6 21:31:42

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/5 20:48:37

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2025/6/19 5:45:52

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/7/5 18:26:46

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2025/7/7 2:29:38

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/7/7 5:46:30

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2025/7/6 14:54:44

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2025/7/6 13:07:42

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/7/6 19:25:41

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

编程新知 2025/6/15 23:04:57