JS XMLHttpRequest()如何只读取到网页源代码里<pre>标签和</pre>标签中间的内容呢

时间: 2024-06-10 18:07:11 浏览: 12
可以使用正则表达式来提取<pre>标签和</pre>标签中间的内容。具体实现代码如下： var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://example.com', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var preContent = xhr.responseText.match(/<pre>(.*?)<\/pre>/gs)[0]; console.log(preContent); } }; xhr.send(); 这个代码可以实现异步读取指定url的网页源代码，然后使用正则表达式提取其中的<pre>标签和</pre>标签中间的内容。 请注意，这个代码只能读取到第一个出现的<pre>标签和</pre>标签中间的内容。如果有多个这样的标签，可以使用for循环来提取所有内容。
相关问题

JS XMLHttpRequest()如何只读取到网页<pre>标签里的内容呢

JS XMLHttpRequest()可以使用responseText属性获取HTTP响应的内容。你可以先使用getElementsByTagName()方法获取到<pre>标签的元素，再通过innerText属性获取到<pre>标签里的内容。以下是示例代码： ```javascript var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var preTags = document.getElementsByTagName('pre'); if (preTags.length > 0) { var content = preTags[0].innerText; console.log(content); } else { console.log('No <pre> tags found!'); } } }; xhr.open("GET", "http://example.com", true); xhr.send(); ```

<?xml version="1.0" encoding="ISO-8859-1"?> <bookstore> <book category="children"> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book> <book category="cooking"> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="web"> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </book> <book category="web"> <author>James McGovern</author> <author>Per Bothner</author> <author>Kurt Cagle</author> <author>James Linn</author> <author>Vaidyanathan Nagarajan</author> <year>2003</year> <price>49.99</price> </book> </bookstore> 按照上述xml文件，使用html和javascript读取.xml文件的节点内容，以表格方式对内容进行显示，通过下拉单进行交互式书目内容选取，仅显示选中的书目信息

以下是实现该功能的示例代码： HTML部分： ```html <!DOCTYPE html> <html> <head> <title>Interactive Bookstore</title> </head> <body> <select id="category"> <option value="">Select a category</option> <option value="children">Children</option> <option value="cooking">Cooking</option> <option value="web">Web</option> </select> <table id="bookTable"> <thead> <tr> <th>Author</th> <th>Year</th> <th>Price</th> </tr> </thead> <tbody> </tbody> </table> <script src="script.js"></script> </body> </html> ``` JavaScript部分： ```javascript // 加载xml文件 var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { displayBooks(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); // 处理选择器变化事件 document.getElementById("category").addEventListener("change", function() { var selectedCategory = this.value; var books = document.getElementsByTagName("book"); // 遍历所有书籍，根据类别显示或隐藏 for (var i = 0; i < books.length; i++) { if (selectedCategory == "" || books[i].getAttribute("category") == selectedCategory) { books[i].style.display = "table-row"; } else { books[i].style.display = "none"; } } }); // 显示所有书籍 function displayBooks(xml) { var xmlDoc = xml.responseXML; var books = xmlDoc.getElementsByTagName("book"); var bookTable = document.getElementById("bookTable"); // 遍历所有书籍，并在表格中添加新行 for (var i = 0; i < books.length; i++) { var row = bookTable.insertRow(-1); row.setAttribute("category", books[i].getAttribute("category")); row.style.display = "table-row"; var authorCell = row.insertCell(0); var yearCell = row.insertCell(1); var priceCell = row.insertCell(2); authorCell.innerHTML = books[i].getElementsByTagName("author")[0].childNodes[0].nodeValue; yearCell.innerHTML = books[i].getElementsByTagName("year")[0].childNodes[0].nodeValue; priceCell.innerHTML = books[i].getElementsByTagName("price")[0].childNodes[0].nodeValue; } } ``` 在该示例中，我们首先使用XMLHttpRequest对象加载books.xml文件。一旦文件加载完成，我们调用displayBooks函数来解析XML并在表格中显示所有书籍信息。 我们还在页面上添加了一个下拉单，使用户可以选择要显示的书籍类别。在选择器变化事件中，我们遍历所有书籍，并根据类别显示或隐藏它们。 在表格中显示书籍信息时，我们使用insertRow函数向表格添加新行，并使用insertCell函数向行添加新单元格。我们还使用getAttribute和getElementsByTagName函数从XML中获取书籍的类别、作者、年份和价格信息。

相关推荐

rar

ajaxfileupload 返回时 去掉 与 jquery1.7支持解决 方法

var cleanedResponse = response.replace(/<pre>/g, '').replace(/<\/pre>/g, ''); // 处理cleanedResponse } }); 其次，关于jQuery 1.7的兼容性问题，这可能涉及到AjaxFileUpload使用了一些在新版本中已被...
pdf

js判断IE6/IE7/FF的代码[XMLHttpRequest]

那当然，你能想到的很多人都能想的到，就好像大楚网的广告添加方法，真是让我见识到了真正的JS高手是如何练就的了，废话不说了，看代码： 代码如下: if (window.XMLHttpRequest) { //Mozilla, Safari,IE7 alert(...
pdf

Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据

Ajax无刷新读取数据库数据技术是指使用JavaScript、XMLHttpRequest和ASP.NET技术实现无刷新读取数据库数据的功能。本文将详细介绍该技术的实现过程。 一、技术背景 随着Web应用程序的发展，对数据的实时更新和读取...

写一个若依框架<editor></editor>标签的代码 案例为填写内容 通过api传回后端保存

<div>这是一段示例代码，用JavaScript编写：</div><div> <pre><code>const ruoyiForm = { formFields: { content: '' } }const handleSubmit = () => { axios .post('/api/xxx', ruoyiForm.formFields) .then...

<body> <form action="QueryServlet" method="post"> 请输入用户名：<input type="text" name="userName"/> <input type="submit" value="查询"/> 显示全部 </form> 用户名密码积分注册时间 <c:forEach items="${users }" var="item"> ${item.userName } ${item.password } ${item.integral } ${item.registerTime } 删除 </c:forEach> </body>tomcat 删除一条记录怎么写，不用web.xml，详细点

<td><a href="javascript:deleteUser('${item.userName }')">删除</a></td> 3. 在 JSP 页面中，添加 JavaScript 函数来发送 Ajax 请求，调用 Servlet 中实现的 doPost 方法进行删除操作。 javascript ...

用Javascript实现XML编程 要求如下： 实现myXML函数，带有一个形参，解析传过来的XML，并返回name节点的值 XML的样式如： <student><name>mike</name><age>18</age><class>one</class></student>

var xmlExample = '<student><name>mike</name><age>18</age><class>one</class></student>'; console.log(myXML(xmlExample)); // 输出：mike 如果你想要处理更复杂的XML文档或者支持XMLHttpRequest，你可能...

如何在<script>标签中获取session中的值

在 <script> 标签中，你可以使用 AJAX 请求方式来获取 Session 值。以下是一个示例代码： html <script> var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (this.readyState == ...

register <input type="text" placeholder="用户名"> <input type="email" placeholder="邮箱"> <input type="password" placeholder="密码"> <input type="password" placeholder="确认密码"> <button id="registerButton">注册</button> login <input type="text" placeholder="用户名"> <input type="password" placeholder="密码"> <button id="loginButton">登录</button> 欢迎来到原神 你将在游戏中探索一个被称作「提瓦特」的幻想世界。 已有账号 <button id="login">去登录</button> 欢迎来到原神 你将在游戏中探索一个被称作「提瓦特」的幻想世界。 没有账号？ <button id="register">去注册</button> 根据这段代码写一个登陆系统登陆成功在此网页打开新的html文件

<h1>登录</h1> <form id="loginForm"> <input type="text" placeholder="用户名" name="username"> <input type="password" placeholder="密码" name="password"> <button type="submit" id="loginButton">登录...

請問這個怎麽和後端交互實現數據更新 <!DOCTYPE html> <html> <head> <title>设备运行实況</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; background-color: #f7f7f7; } h1 { text-align: center; margin-top: 50px; } table { margin: auto; border-collapse: collapse; border: 1px solid #ddd; width: 80%; } th, td { padding: 12px; text-align: center; border-bottom: 1px solid #ddd; } th { background-color: #4CAF50; color: white; } .status-ok { color: green; font-weight: bold; } .status-warning { color: orange; font-weight: bold; } .status-error { color: red; font-weight: bold; } </style> </head> <body> 设备运行实況 设备名称 运行状态 最近更新时间 设备 A 正常运行 2021-10-01 10:30:00 设备 B 运行异常 2021-10-01 11:00:00 设备 C 停机 2021-10-01 12:11:00 </body> </html>

一种常见的方式是使用 JavaScript 和 AJAX 技术，通过向后端发送请求获取数据，并将数据动态更新到页面上。 具体实现步骤如下： 1. 在后端编写一个 API，用于获取设备运行状态的数据。可以使用 Flask、Django 等...

利用ajax实现 <select id="provice"> <option>请选择省</option> </select> <select id="city"> <option>请选择市</option> </select>

好的，你可以参考下面的代码示例实现省市级联选择： html <select id="province"> <option>请选择省</option> </select> <select id="city"> <option>请选择市</option> </select> <script> // 页面加载时...

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>1-用户登录</title> <style type="text/css"> a{text-decoration:none} body{ background-image:url(../img/longmao.webp); background-size: cover; height: 100vh; } h3{ color:#FFF; font-size:30px; } td{ color:#FFF; font-size:20px; } .ps{ padding-top:0px; } </style> <script type="text/javascript"> function refreshVerifyCode() { // 刷新验证码 var verifyCodeImage = document.getElementById("verify_codeImage"); verifyCodeImage.src = "../VerifyCodeServlet?" + Math.random(); } function register() { window.location.href = "register.jsp"; } </script> </head> <body > 新闻发布系统>>用户管理>>登录
<form action="../LoginSerlvet" method="post" name="frm_login"> 用户名： <input type="text" name="userName"value="张凯"> 密码： <input type="password" name="userPassword" value="1111"> 验证码： <input type="text" name="verifyCode" value=""> <input type="submit" name="ok" value="提交"> <input type="reset" name="cancel" value="取消"> <input type="button" onclick="register();" value="注册"> </form> </body> </html>加一个3.Ajax异步验证。登录时账号输完马上显示账号重复了。

我给你提供一种实现方式，你可以将以下代码插入到 <head> 标签中： <script type="text/javascript"> function checkUsername() { var xmlHttp; try { xmlHttp = new XMLHttpRequest(); // Firefox, ...

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>ESP8266 LED Control</title> <style> </style></head><body> ESP8266 LED Control <input type="range" min="0" max="255" value="0" id="brightnessSlider" oninput="onput_function();"> Brightness: 0 <script> function onput_function() {var slider = document.getElementById("brightnessSlider"); var output = document.getElementById("brightnessValue"); output.innerHTML = "值为" + this.value; }); function sendBrightness(value) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { console.log("Brightness set to: " + value); } }; xhttp.open("GET", "/brightness?value=" + value, true); xhttp.send(); } </script>body></html>把这段代码整理成网页格式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ESP8266 LED Control</title> <style> </style> </> <body> <h1>ESP8266 LED Control</h1> <input type="range" min="0" max="255" value="0" ...

<!DOCTYPE html> <html> <head> <title>XMLHttpRequest Demo</title> </head> <body> XMLHttpRequest Demo <script> window.onload = function () { makeRequest(); }; function makeRequest() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById("response").innerHTML = xhr.responseText; } }; xhr.open( "GET", "http://finance-sit.test.hihonor.com/fin/eipm/dom/servlet/environment", true ); xhr.send(); } </script> </body> </html>

这是一个使用 JavaScript 和 XMLHttpRequest 对象发送 GET 请求获取数据的简单的 web 页面示例。该页面中通过将请求发送到指定的 URL，从而获取了来自服务器的响应，并将响应输出到页面上的指定元素中。其中，通过 ...

<!DOCTYPE html> <html> <head> <title>Get请求页面示例</title> </head> <body> 欢迎来到我的页面 以下是获取到的数据： <script> // 发送GET请求 var xhr = new XMLHttpRequest(); xhr.open('GET', 'your-api-url', true); xhr.onload = function() { if (xhr.status === 200) { // 请求成功，将返回的数据渲染到页面上 var data = JSON.parse(xhr.responseText); var dataDiv = document.getElementById('data'); dataDiv.innerHTML = '' + data.message + ''; } else { // 请求失败，提示用户 alert('请求失败，错误码：' + xhr.status); } }; xhr.send(); </script> </body> </html>

这段代码是一个使用 AJAX 技术获取数据并将数据渲染到页面上的示例。其中，使用了 XMLHttpRequest 对象发送 GET 请求，并在请求成功时将返回的数据解析为 JSON 格式，再将数据渲染到页面上。需要注意的是，在实际...

<!DOCTYPE html><html><head> <title>ESP8266 LED 控制</title> <meta charset="UTF-8"></head><body> ESP8266 LED 控制 点击按钮来控制 LED 灯： <button onclick="sendData('on')">开灯</button> <button onclick="sendData('off')">关灯</button> <script> function sendData(status) { var xhr = new XMLHttpRequest(); xhr.open("GET", "http://192.168.1.100/led?status=" + status, true); xhr.send(); } </script></body></html>为什么这段代码中没有<form>

这段代码中没有使用 <form> 标签是因为这个页面并没有需要提交的表单数据。我们只需要通过点击按钮来向 ESP8266 发送 HTTP 请求，不需要使用到表单的提交功能。 实际上，使用 <form> 标签也可以实现控制 LED 灯...

不能将类型“void”分配给类型“XMLHttpRequest | Promise<unknown>”

这个错误通常发生在 TypeScript 中，指示你将一个 void 类型的值分配给了一个可能是 XMLHttpRequest 或 Promise<unknown> 类型的变量。这种错误通常是由于类型不匹配导致的。 要解决这个问题，你可以确保将...

为下列html页面添加css样式表<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>航班信息删除</title> </head> <body> 航班信息删除 <form action="/flightQuery" method="GET" onsubmit="return queryFlight()"> <label for="flightNumber">航班号:</label> <input type="text" id="flightNumber" name="flightNumber">

<input type="submit" value="提交"> </form> <script> function queryFlight() { var flightNumber = document.getElementById("flightNumber").value; // 发送请求 var xhr = new XMLHttpRequest(); xhr.open('GET', '/flightDelete?flightNumber=' + flightNumber); xhr.onreadystatechange = function() { if (xhr.status === 200) { // 渲染结果到页面 document.getElementById("result").innerHTML = xhr.responseText; } }; xhr.send(); return false; } </script> </body> </html>

你可以在 head 标签中添加 style 标签，然后在其中添加 CSS 样式代码，例如： <style> h2 { color: blue; } label { display: inline-block; width: 80px; font-weight: bold; margin-bottom: 10px...

最新推荐

recommend-type

三相三绕组电力变压器专用技术规范.doc

变压器
recommend-type

一个简单的Swift示例代码

一个简单的Swift示例代码，该代码定义了一个结构体Person，用于表示一个人的信息，包括姓名和年龄。
recommend-type

SQL数据库课程设计.doc

数据库
recommend-type

华资笔试.txt

华资笔试
recommend-type

C语言基础的概要介绍与分析

关于C语言基础的资源描述如下： 对于初学者而言，掌握C语言基础是学习编程的重要一步。以下是一个关于C语言基础资源的详细描述： 学习资源： 菜鸟教程：作为初学者的首选，提供了C语言的入门教程，详细解释基本语法和实例，帮助用户快速上手。 C语言中文网：专注于C语言教学的网站，提供大量的教程和实例，内容系统且丰富，适合想要深入学习的用户。 中国大学MOOC：国内知名的大规模在线开放课程平台，提供C语言相关的课程，适合希望系统学习计算机专业知识的用户。 书籍推荐： C Primer Plus 第6版：一本经典的C语言入门书籍，内容全面且易于理解，适合零基础用户自学。 明解C语言 第3版：另一本入门好书，通过图解的方式详细解释C语言的基础知识和编程技巧。 在线视频教程： 爱奇艺等平台提供了C语言基础入门到提高的系列视频教程，内容覆盖数据类型、流程控制语句、数组、函数等知识点，通过项目实战加深理解。 实践平台： GitHub是全球最大的代码托管平台，可以搜索并学习他人分享的C语言开源项目，从实践中学习和提高。 洛谷等平台提供在线编程环境，用户可以通过完成不同难度的练习题来巩固所学知识。 学习建
recommend-type

计算机基础知识试题与解答

"计算机基础知识试题及答案-(1).doc" 这篇文档包含了计算机基础知识的多项选择题，涵盖了计算机历史、操作系统、计算机分类、电子器件、计算机系统组成、软件类型、计算机语言、运算速度度量单位、数据存储单位、进制转换以及输入/输出设备等多个方面。 1. 世界上第一台电子数字计算机名为ENIAC（电子数字积分计算器），这是计算机发展史上的一个重要里程碑。 2. 操作系统的作用是控制和管理系统资源的使用，它负责管理计算机硬件和软件资源，提供用户界面，使用户能够高效地使用计算机。 3. 个人计算机（PC）属于微型计算机类别，适合个人使用，具有较高的性价比和灵活性。 4. 当前制造计算机普遍采用的电子器件是超大规模集成电路（VLSI），这使得计算机的处理能力和集成度大大提高。 5. 完整的计算机系统由硬件系统和软件系统两部分组成，硬件包括计算机硬件设备，软件则包括系统软件和应用软件。 6. 计算机软件不仅指计算机程序，还包括相关的文档、数据和程序设计语言。 7. 软件系统通常分为系统软件和应用软件，系统软件如操作系统，应用软件则是用户用于特定任务的软件。 8. 机器语言是计算机可以直接执行的语言，不需要编译，因为它直接对应于硬件指令集。 9. 微机的性能主要由CPU决定，CPU的性能指标包括时钟频率、架构、核心数量等。 10. 运算器是计算机中的一个重要组成部分，主要负责进行算术和逻辑运算。 11. MIPS（Millions of Instructions Per Second）是衡量计算机每秒执行指令数的单位，用于描述计算机的运算速度。 12. 计算机存储数据的最小单位是位（比特，bit），是二进制的基本单位。 13. 一个字节由8个二进制位组成，是计算机中表示基本信息的最小单位。 14. 1MB（兆字节）等于1,048,576字节，这是常见的内存和存储容量单位。 15. 八进制数的范围是0-7，因此317是一个可能的八进制数。 16. 与十进制36.875等值的二进制数是100100.111，其中整数部分36转换为二进制为100100，小数部分0.875转换为二进制为0.111。 17. 逻辑运算中，0+1应该等于1，但选项C错误地给出了0+1=0。 18. 磁盘是一种外存储设备，用于长期存储大量数据，既可读也可写。 这些题目旨在帮助学习者巩固和检验计算机基础知识的理解，涵盖的领域广泛，对于初学者或需要复习基础知识的人来说很有价值。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

【进阶】音频处理基础：使用Librosa

![【进阶】音频处理基础：使用Librosa](https://picx.zhimg.com/80/v2-a39e5c9bff1d920097341591ca8a2dfe_1440w.webp?source=1def8aca) # 2.1 Librosa库的安装和导入 Librosa库是一个用于音频处理的Python库。要安装Librosa库，请在命令行中输入以下命令： ``` pip install librosa ``` 安装完成后，可以通过以下方式导入Librosa库： ```python import librosa ``` 导入Librosa库后，就可以使用其提供的各种函数
recommend-type

设置ansible 开机自启

Ansible是一个强大的自动化运维工具，它可以用来配置和管理服务器。如果你想要在服务器启动时自动运行Ansible任务，通常会涉及到配置服务或守护进程。以下是使用Ansible设置开机自启的基本步骤： 1. **在主机上安装必要的软件**： 首先确保目标服务器上已经安装了Ansible和SSH（因为Ansible通常是通过SSH执行操作的）。如果需要，可以通过包管理器如apt、yum或zypper安装它们。 2. **编写Ansible playbook**： 创建一个YAML格式的playbook，其中包含`service`模块来管理服务。例如，你可以创建一个名为`setu
recommend-type

计算机基础知识试题与解析

"计算机基础知识试题及答案(二).doc" 这篇文档包含了计算机基础知识的多项选择题，涵盖了操作系统、硬件、数据表示、存储器、程序、病毒、计算机分类、语言等多个方面的知识。 1. 计算机系统由硬件系统和软件系统两部分组成，选项C正确。硬件包括计算机及其外部设备，而软件包括系统软件和应用软件。 2. 十六进制1000转换为十进制是4096，因此选项A正确。十六进制的1000相当于1*16^3 = 4096。 3. ENTER键是回车换行键，用于确认输入或换行，选项B正确。 4. DRAM（Dynamic Random Access Memory）是动态随机存取存储器，选项B正确，它需要周期性刷新来保持数据。 5. Bit是二进制位的简称，是计算机中数据的最小单位，选项A正确。 6. 汉字国标码GB2312-80规定每个汉字用两个字节表示，选项B正确。 7. 微机系统的开机顺序通常是先打开外部设备（如显示器、打印机等），再开启主机，选项D正确。 8. 使用高级语言编写的程序称为源程序，需要经过编译或解释才能执行，选项A正确。 9. 微机病毒是指人为设计的、具有破坏性的小程序，通常通过网络传播，选项D正确。 10. 运算器、控制器及内存的总称是CPU（Central Processing Unit），选项A正确。 11. U盘作为外存储器，断电后存储的信息不会丢失，选项A正确。 12. 财务管理软件属于应用软件，是为特定应用而开发的，选项D正确。 13. 计算机网络的最大好处是实现资源共享，选项C正确。 14. 个人计算机属于微机，选项D正确。 15. 微机唯一能直接识别和处理的语言是机器语言，它是计算机硬件可以直接执行的指令集，选项D正确。 16. 断电会丢失原存信息的存储器是半导体RAM（Random Access Memory），选项A正确。 17. 硬盘连同驱动器是一种外存储器，用于长期存储大量数据，选项B正确。 18. 在内存中，每个基本单位的唯一序号称为地址，选项B正确。 以上是对文档部分内容的详细解释，这些知识对于理解和操作计算机系统至关重要。