最近在查看一个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 开发者工具提取对应的字符串的更多相关文章

  1. Chrome开发者工具不完全指南(六、插件篇)

    本篇是Chrome开发者工具的结尾篇,最后为大家介绍几款功能强大的插件.在chrome商店里面有很多插件,没事建议大家去逛逛.不过需要FQ,所以诸位请自备神器.一.皮肤插件 首先是大家期盼已久,翘首以 ...

  2. Chrome开发者工具详解(4)-Profiles面板

    Chrome开发者工具详解(4)-Profiles面板 如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一 ...

  3. Chrome开发者工具详解(1)-Elements、Console、Sources面板

    Chrome开发者工具详解(1)-Elements.Console.Sources面板 Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Netwo ...

  4. Chrome开发者工具详解(1)

    Chrome开发者工具面板 面板上包含了Elements.Console.Sources.Network.Timeline.Profiles.Application.Security.Audits这些 ...

  5. 前端调试效率低?试试这10个“Chrome开发者工具”使用技巧

    摘要:今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试, ...

  6. Chrome开发者工具详解(1):Elements、Console、Sources面板

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...

  7. 用Chrome开发者工具做JavaScript性能分析

    来源: http://blog.jobbole.com/31178/ 你的网站正常运转.现在我们来让它运转的更快.网站的性能由页面载入速度和代码执行效率决定.一些服务可以让你的网站载入更快,比如压缩J ...

  8. 前端开发必备之Chrome开发者工具(一)

    本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 ...

  9. 使用chrome开发者工具中的network面板测量网站网络性能

    前面的话 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析.使用 Network 面板测量网站网络性能.本文将详细介绍chrom ...

  10. 前端开发必备之Chrome开发者工具(上篇)

    本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 ...

随机推荐

  1. 【FAQ】调用应用内支付SDK时报错,如何用tag对问题进行排查和分析

    华为应用内支付服务(In-App Purchases,IAP)为开发者提供便捷的应用内支付体验和简便的接入流程.开发者的应用集成IAP SDK后,调用IAP SDK接口,启动IAP收银台,即可实现应用 ...

  2. Telnet qsnctfwp

    Windows 安装 Telnet 在控制面板的程序和功能中选择打开或关闭Windows功能 启用 Telnet 客户端并单击确认退出 启动终端,输入命令 telnet 打开 Telnet 客户端 在 ...

  3. Visual Studio 2019汇编报错 warning LNK4258: 指令“/ENTRY:main@0”与开关“/ENTRY:main”不兼容;已忽略

    Visual Studio 2019汇编报错 warning LNK4258: 指令"/ENTRY:main@0"与开关"/ENTRY:main"不兼容:已忽略 ...

  4. Scratch3自定义积木块之新增积木块

    在Scratch3.0的二次开发中,新功能的研发和扩展离不开积木块的添加,这篇主要讲解Scratch3.0中新增积木块部分 Scratch3.0中对于新增积木块有两种方式: 1. 初始化积木块方式   ...

  5. 初探Mysql架构和InnoDB存储引擎

    前言 mysql相信大家都不陌生了,分享之前我们先思考几个面试题: 1.undo log和redo log了解过吗?它们的作⽤分别是什么? 2.redo log是如何保证事务不丢失的? 3.mysql ...

  6. KubeVela v1.2 发布:你要的图形化操作控制台 VelaUX 终于来了!

    ​简介:时间来到 2022 年,KubeVela 也正式进入了第四个阶段,在原先核心控制器 API 基本稳定的基础上,我们以插件的形式增加了一系列开箱即用的功能.让开发者可以通过 UI 控制台的方式, ...

  7. 如何专业化监控一个Kubernetes集群?

    简介: 本文会介绍 Kubernetes 可观测性系统的构建,以及基于阿里云云产品实现 Kubernetes 可观测系统构建的最佳实践. 作者:佳旭 阿里云容器服务技术专家 引言 Kubernetes ...

  8. ICBU可控文本生成技术详解

    ​简介: 文本生成(Text Generation)是自然语言处理(Natural Language Processing,NLP)领域的一项重要且具有挑战的任务.顾名思义,文本生成任务的目的是生成近 ...

  9. [FE] G2Plot 在 Vue 中使用 CDN 方式避免构建时增大 js 体积

    使用 npm.yarn 方式安装的包,虽方便使用,但是会极大增加 vendor.xx.js 体积,拖慢网站运行速度. 以 G2Plot 为例,实际在 build 构建时,会下载一些额外字体到 vend ...

  10. [Contract] 监听 MetaMask 网络变化, 账号切换

    为什么需要监听网络变化?目前在 MetaMask 中切换网络,网页会自动刷新,但是这一特性后面将停止使用. MetaMask: MetaMask will soon stop reloading pa ...