防止jQuery在解析HTML字符串时下载资源

Question

var strHTML = "<div><img src='/fake/path/fakeImage.jpg'/><span id='target'>text to extract</span></div>";

var dom = $(strHTML);

var extractedText = dom.find("#target").text();
alert(extractedText);

当我将 HTML 字符串转换为 jQuery 对象时，jQuery 会发出 GET 请求来检索图片，正如您在开发人员工具的网络选项卡中看到的那样。

JsFiddle

如何将 HTML 字符串转换为 jQuery 对象而不从解析的字符串中下载任何资源？

注意：jQuery.parseHTML 不返回 jQuery 对象，例如不能使用 .find()。

Answer 1

我不认为这是可能的，因为不是 jQuery（或 javascript）来加载图像，而是浏览器 - 只要在 img 元素上设置了 src 属性，浏览器就会尝试下载吧。

您可以做的一件事是在构建 dom 之前将元素名称从 img 更改为其他名称，或者将 src 属性更改为其他名称，例如：

// change the <img> elements to <my_img> to avoid image fetching
strHtml = strHtml.replace(/<img /gi, "<my_img ").replace(/<\/img>/gi, "</my_img>");

// or the 2nd alternative:  change the src attribute of images
strHtml = strHtml.replace(/<img([^>]*?) src=/gi, "<img$1 my_src=")

// now its safe to parse into DOM - no images will be fetched
var dom = $(strHtml);

请注意，这个简单的“搜索和替换”可能会替换您想要的元素以外的文本，但对于您的用例来说可能就足够了。

Answer 2

你可以先通过$.parseXML喂它：

var strHTML = "<div><img src='/fake/path/fakeImage.jpg'/><span id='target'>text to extract</span></div>";

var dom = $($.parseXML(strHTML));

var extractedText = dom.find("#target").text();
alert(extractedText);