jQuery对请求图像的外部文本进行查询

jQuery on external text requesting images

本文关键字：文本 查询 外部 请求 图像 jQuery      更新时间：2023-09-26

我正在开发一个chrome扩展，该扩展使用jquery解析页面的源代码以查找特定内容。举个例子，我正在浏览维基百科以获取类别。

我通过获得页面的来源

chrome.tabs.executeScript(tabId, {
            code: "chrome.extension.sendMessage({action: 'getContentText', source: document.body.innerHTML, location: window.location});"
}, function() {
    if (chrome.extension.lastError)
         console.log(chrome.extension.lastError.message);
});

然后我（成功地）监听这个消息，然后使用jquery解析对象的source密钥，就像一样

if (request.action == "getContentText")
{
    //console.log(request.source);
    $('#mw-normal-catlinks > ul > li > a', request.source).each(function()
    {
        console.log("category", $(this).html());
    });
}

这可以按预期工作，并在HTML中记录所有类别链接的列表。然而，这个问题发生在jQuery选择器中，它试图加载request.source中包含的图像。这会导致等错误

GET chrome-extension://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Padlock-silver.svg/20px-Padlock-silver.svg.png net::ERR_FAILED

这些都是有效的链接，但它们是从我的扩展中调用的（不需要），前缀为chrome-extension://（无效）。我不知道为什么jquery会尝试使用选择器来评估/请求源内的图像

我想这是因为维基百科在其图像上使用相对路径（而不是https://或http://，简单地说是//-所以加载的内容是相对于服务器的）。jQuery正在发出请求，您可以在这里看到如何解决此问题（将来，请确保更彻底地搜索SO）。

非常感谢@timonwimmer在聊天中对我的帮助。我们碰巧同时找到了不同的解决方案。

我的解决方案是使用正则表达式来删除任何出现的图像。通过

var source = request.source.replace(/.*?'.wikimedia'.org'/.*?/g, "");

他的答案已经是关于堆栈溢出的，这是从另一个答案派生出来的。如果你感兴趣的话，这个答案非常适用

如果给jQuery一个带有完整元素声明的字符串，它实际上会生成一个新的DOM元素，类似于调用document.createElement(tagName)并设置所有属性。例如：var $newEl = $("<p>test</p>")，或者在您的情况下使用$("<img/>")标记img元素。它将被解析并创建为一个新的DOMHTML元素，并由jQuery包装，以便您可以查询它

由于传递的是一个完整有效的HTML字符串，因此它首先将其解析为一个实际的DOM。这是因为jQuery使用了内置的底层document.querySelector方法，它们作用于DOM而不是字符串——将DOM视为一个数据库，其中包含用于查询的id、class和属性的索引。例如，MongoDB无法对原始JSON字符串执行查询，它需要首先将JSON处理到BSON中并对其进行索引，然后对其执行查询。

jQuery的问题较少，而元素是如何创建的，以及当这些元素的属性发生变化时会发生什么。例如，当用document.createElement('img')创建img元素，然后用imgElement.src = "link to image"设置src属性时，这会自动触发对位置src处的图像的加载。

您可以在JavaScript开发人员控制台中运行以下程序来自行测试：

var img = document.createElement('img');
img.src = "broken-link";

请注意，在运行后，这可能会在控制台中显示并出错，说明找不到映像。

因此，为了确保它不会解析图像的src，您需要1） 在现有DOM上应用jQuery（document.body等），或者2） 让它将字符串解析和求值为DOM，并在处理之前清理字符串（使用Regex或其他方法删除img标记）。看看https://stackoverflow.com/a/11230103/2578205用于从字符串中删除HTML标记。

希望它能成功！

相关文章：