解析 <script> 和/或 <noscript> 标签中的 <img> src 属性答案

【问题标题】：Parse <img> src attribute found within <script> and/or <noscript> tags解析 <script> 和/或 <noscript> 标签中的 <img> src 属性
【发布时间】：2016-12-19 22:07:13
【问题描述】：

我有以下字符串：

<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、width 和 height 属性。

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

我试过这个：

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

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

【问题讨论】：

如果您想编辑我的答案，因为您改变了对这个问题的看法，请也编辑您的问题，因为您的问题让我的回答有误。天知道其他 3 个人是如何批准这样的编辑的

标签： javascript jquery html parsing dom

【解决方案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);

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

【讨论】：