如何抓取指定class为verse的网页元素内容并在自有HTML页面展示

首先，你的代码存在几个关键问题导致功能失效，我来逐一拆解并给出修复方案：

1. 跨域资源共享（CORS）限制 #

浏览器的同源策略会阻止前端JavaScript直接请求不同域名的资源，你要抓取的目标网页和你的本地页面域名不同，所以直接请求会被浏览器拦截。解决这个问题的常用方法有两种：

• 后端代理：搭建一个简单的后端服务，由后端去请求目标网页，再把结果返回给前端（这样就避开了浏览器的跨域限制）。
• 本地开发临时方案：如果你只是本地测试，可以启动浏览器时禁用CORS（比如Chrome用--disable-web-security --user-data-dir="C:/ChromeDevSession"参数启动，仅用于测试，生产环境绝对不能用）。

2. jQuery方法使用错误 #

你的load方法用法完全不对，load是异步方法，会把加载的内容直接插入到指定元素中，不能直接赋值获取内容；另外你用了单引号包裹模板字符串，这会导致${link}不会被解析成变量值。

修复后的完整代码 #

下面是修正后的代码，我用$.get来获取目标页面的HTML内容，然后在回调函数中处理并提取.verse元素的文本：

<!DOCTYPE html>
<html>
<head>
<title>Get Verse 1.0</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<body>
<input type="text" id="link" placeholder="输入目标网页链接">
<input id="clickMe" type="button" value="获取经文" onclick="getAndDisplay()">
<p id="actualText"></p>

<script type="text/javascript">
function getAndDisplay(){
    const link = document.getElementById('link').value;
    if (!link) {
        alert('请输入目标链接');
        return;
    }

    // 注意：这里如果直接请求外部域名会触发CORS错误，需要后端代理或本地禁用CORS
    $.get(link, function(responseHtml) {
        // 将返回的HTML转换成jQuery对象，方便选择器操作
        const $response = $(responseHtml);
        // 找到所有.verse元素，提取它们的文本内容
        const verseTexts = $response.find('.verse').map(function() {
            return $(this).text().trim();
        }).get();
        
        // 将所有经文文本拼接后展示到p标签中
        document.getElementById("actualText").innerHTML = verseTexts.join('<br><br>');
    }).fail(function() {
        alert('请求失败，请检查链接或跨域设置');
    });
}
</script>
</body>
</html>

关键修复点说明 #

• 用$.get替代load，并通过回调函数处理异步返回的内容（因为AJAX请求是异步的，不能同步获取结果）。
• 将返回的HTML字符串转换成jQuery对象，再用find('.verse')筛选目标元素。
• 使用map()和get()提取所有.verse元素的文本内容，并用join()拼接成适合展示的格式。
• 添加了简单的输入校验和请求失败提示，提升用户体验。

关于跨域的补充说明 #

如果要在生产环境使用这个功能，必须搭建后端代理。比如用Node.js写一个简单的代理接口：

// Node.js + Express 示例
const express = require('express');
const axios = require('axios');
const app = express();

app.get('/proxy', async (req, res) => {
    try {
        const url = req.query.url;
        const response = await axios.get(url);
        res.send(response.data);
    } catch (error) {
        res.status(500).send('请求失败');
    }
});

app.listen(3000, () => console.log('代理服务启动在3000端口'));

然后前端把请求地址改成/proxy?url=目标链接，这样就可以绕过浏览器的CORS限制了。

内容的提问来源于stack exchange，提问作者Antonio Labate