使用Chrome 开发者工具提取对应的字符串
最近在查看一个API的数据,效果很好,但是里面只有一部分我想要的内容
如果是简单一点的可以直接获取
如下比如我想要提取返回的代码中关键的字符串:"video": "这里的内容"
// 定义一个正则表达式来匹配 '"video": "链接"' 格式的字符串
var regex = /"video":\s*"([^"]+)"/gi;
// 用于存储所有找到的链接
var links = [];
// 执行正则表达式搜索
var match;
while ((match = regex.exec(document.body.textContent)) !== null) {
// match[1] 包含链接
links.push(match[1]);
}
// 打印所有找到的链接,每个链接一行
links.forEach(function(link, index) {
console.log('video' + (index + 1) + ': ' + link);
});
但是如果返回的结果有10万行代码左右阁下该如何应对?
我突发奇想,让浏览器自己滚动,一边滚动一边扫描就想PLC一样,一边扫描一边执行程序
// 定义一个正则表达式来匹配 '"video": "链接"' 格式的字符串
var regex = /"video":\s*"([^"]+)"/g;
var matches = [];
var interval;
var step = 100; // 每次滚动的像素数
var position = 0; // 当前滚动位置
// 滚动函数
function scrollToBottom() {
position += step;
window.scrollTo(0, position);
// 检查是否到达页面底部
if (position >= document.body.scrollHeight) {
clearInterval(interval);
printMatches();
} else {
// 继续寻找匹配项
findMatches();
}
}
// 查找匹配项的函数
function findMatches() {
var text = document.body.innerText;
var match;
while ((match = regex.exec(text)) !== null) {
matches.push(match[1]); // 只添加链接部分
}
}
// 打印匹配结果的函数
function printMatches() {
console.log('找到的链接数量:', matches.length);
matches.forEach(function(link, index) {
console.log('video' + (index + 1) + ': ' + link);
});
}
// 开始滚动和查找匹配项
interval = setInterval(scrollToBottom, 50); // 每50毫秒滚动一次
讲解:首先定义了一个滚动函数
scrollToBottom,它会逐步向下滚动页面,并在每次滚动后调用findMatches函数来查找匹配的链接。当滚动到页面底部时,通过clearInterval停止滚动,并调用printMatches函数来打印所有找到的链接。
使用Chrome 开发者工具提取对应的字符串的更多相关文章
- Chrome开发者工具不完全指南(六、插件篇)
本篇是Chrome开发者工具的结尾篇,最后为大家介绍几款功能强大的插件.在chrome商店里面有很多插件,没事建议大家去逛逛.不过需要FQ,所以诸位请自备神器.一.皮肤插件 首先是大家期盼已久,翘首以 ...
- Chrome开发者工具详解(4)-Profiles面板
Chrome开发者工具详解(4)-Profiles面板 如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一 ...
- Chrome开发者工具详解(1)-Elements、Console、Sources面板
Chrome开发者工具详解(1)-Elements.Console.Sources面板 Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Netwo ...
- Chrome开发者工具详解(1)
Chrome开发者工具面板 面板上包含了Elements.Console.Sources.Network.Timeline.Profiles.Application.Security.Audits这些 ...
- 前端调试效率低?试试这10个“Chrome开发者工具”使用技巧
摘要:今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试, ...
- Chrome开发者工具详解(1):Elements、Console、Sources面板
Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...
- 用Chrome开发者工具做JavaScript性能分析
来源: http://blog.jobbole.com/31178/ 你的网站正常运转.现在我们来让它运转的更快.网站的性能由页面载入速度和代码执行效率决定.一些服务可以让你的网站载入更快,比如压缩J ...
- 前端开发必备之Chrome开发者工具(一)
本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 ...
- 使用chrome开发者工具中的network面板测量网站网络性能
前面的话 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析.使用 Network 面板测量网站网络性能.本文将详细介绍chrom ...
- 前端开发必备之Chrome开发者工具(上篇)
本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 ...
随机推荐
- 【FAQ】调用应用内支付SDK时报错,如何用tag对问题进行排查和分析
华为应用内支付服务(In-App Purchases,IAP)为开发者提供便捷的应用内支付体验和简便的接入流程.开发者的应用集成IAP SDK后,调用IAP SDK接口,启动IAP收银台,即可实现应用 ...
- Telnet qsnctfwp
Windows 安装 Telnet 在控制面板的程序和功能中选择打开或关闭Windows功能 启用 Telnet 客户端并单击确认退出 启动终端,输入命令 telnet 打开 Telnet 客户端 在 ...
- Visual Studio 2019汇编报错 warning LNK4258: 指令“/ENTRY:main@0”与开关“/ENTRY:main”不兼容;已忽略
Visual Studio 2019汇编报错 warning LNK4258: 指令"/ENTRY:main@0"与开关"/ENTRY:main"不兼容:已忽略 ...
- Scratch3自定义积木块之新增积木块
在Scratch3.0的二次开发中,新功能的研发和扩展离不开积木块的添加,这篇主要讲解Scratch3.0中新增积木块部分 Scratch3.0中对于新增积木块有两种方式: 1. 初始化积木块方式 ...
- 初探Mysql架构和InnoDB存储引擎
前言 mysql相信大家都不陌生了,分享之前我们先思考几个面试题: 1.undo log和redo log了解过吗?它们的作⽤分别是什么? 2.redo log是如何保证事务不丢失的? 3.mysql ...
- KubeVela v1.2 发布:你要的图形化操作控制台 VelaUX 终于来了!
简介:时间来到 2022 年,KubeVela 也正式进入了第四个阶段,在原先核心控制器 API 基本稳定的基础上,我们以插件的形式增加了一系列开箱即用的功能.让开发者可以通过 UI 控制台的方式, ...
- 如何专业化监控一个Kubernetes集群?
简介: 本文会介绍 Kubernetes 可观测性系统的构建,以及基于阿里云云产品实现 Kubernetes 可观测系统构建的最佳实践. 作者:佳旭 阿里云容器服务技术专家 引言 Kubernetes ...
- ICBU可控文本生成技术详解
简介: 文本生成(Text Generation)是自然语言处理(Natural Language Processing,NLP)领域的一项重要且具有挑战的任务.顾名思义,文本生成任务的目的是生成近 ...
- [FE] G2Plot 在 Vue 中使用 CDN 方式避免构建时增大 js 体积
使用 npm.yarn 方式安装的包,虽方便使用,但是会极大增加 vendor.xx.js 体积,拖慢网站运行速度. 以 G2Plot 为例,实际在 build 构建时,会下载一些额外字体到 vend ...
- [Contract] 监听 MetaMask 网络变化, 账号切换
为什么需要监听网络变化?目前在 MetaMask 中切换网络,网页会自动刷新,但是这一特性后面将停止使用. MetaMask: MetaMask will soon stop reloading pa ...