javascript - 解析 &lt;script&gt; 和/或 <noscript> 标签中找到的 <img> src 属性

Question

我有以下字符串:

<script src="https://sys.com/lerers/adkljrver?c=28dsfsd1&w=323434230&h=5424523420&ord=[timestamp]&z=0"></script>
<noscript>
<a href="https://ving-sys.com/server/asfdsfsdr.bs?cn=brd&pli=107dsfsd486sdfds231&Page=&Pos=1979577902" target="_blank">
<img src="https://bs.faf-sys.com/Serving/adServer.bs?c=8534&cn=displaying&pli=1073924861&Page=&Pos=77902" border=0 width=320 height=50></a>
</noscript>

我的目标是在不使用正则表达式或任何类型的indexOf()/loop/If 逻辑的情况下解析出 src、宽度和高度属性。

此解析将在浏览器中进行，因此可以使用 native 浏览器功能或 jQuery。

我已经尝试过这个:

//myString is equal to the string above
var $jQueryObject = $('<div>' + myString + '</div>');
console.log($jQueryObject.find('img').attr('src'))

它返回未定义。我认为这与尝试解析 noscript 和 script 标签中的元素有关。任何返回 src、高度和宽度元素的帮助将不胜感激。

Answer 1

使用DOMParser将是最简单的方法 - 请参阅提供的链接中的浏览器兼容性表，特别是这不适用于 IE9 或更早版本

var parser = new DOMParser(),
    ns = document.querySelector('noscript'),
    doc = parser.parseFromString(ns.textContent, 'text/html'),
    img = doc.querySelector('img');
console.log(img.width);
console.log(img.height);
console.log(img.src);

注意:你可以这样做来给女孩留下深刻的印象:

var img = (new DOMParser()).parseFromString(document.querySelector('noscript').textContent, 'text/html').querySelector('img');
console.log(img.width);
console.log(img.height);
console.log(img.src);

对于IE8/IE9，如果你必须支持它们，你可以这样做

var div = document.createElement('div');
div.innerHTML = document.querySelector('noscript').textContent;
var img = div.querySelector('img');
console.log(img.width);
console.log(img.height);
console.log(img.src);

但请注意，将使用此代码获取图像