如何使用javascript在字符串中获取第一张图片？

Question

如何使用javascript在字符串中获取第一张图片？

我的字符串是

    <p>Hello</p>
<p style="text-align: center; "><img src="https://i.stack.imgur.com/CE5lz.png" alt=""><br></p>
<p style="text-align: center; ">Hello</p><br>
<p style="text-align: center; "><img src="https://www.google.co.th/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" alt=""><br></p>
<p style="text-align: left;">Hello World</p><br><br><br>

我希望第一个图片网址是

我试图在stackoverflow上搜索几个小时但没找到怎么办请帮帮我，我该怎么办？

Answer 1

我建议你在隐藏的div中添加一个标记，并使用Element.querySelector来选择元素并获得其各自的属性。

var str = "<p>Hello</p><p style=\"text-align: center; \"><img src=\"https://i.stack.imgur.com/CE5lz.png\" alt=\"\"><br></p><p style=\"text-align: center; \">Hello</p><br><p style=\"text-align: center; \"><img src=\"https://www.google.co.th/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png\" alt=\"\"><br></p><p style=\"text-align: left;\">Hello World</p><br><br><br>";
var elem = document.createElement('div');
elem.style.display = 'none';
document.body.appendChild(elem);
elem.innerHTML = str;
console.log(elem.querySelector('img').src);

Answer 2

尝试这种简单的方法

• 创建div （不要将其添加到正文的DOM）
• 将innerHTML设为您的字符串
• 执行querySelector以获取第一个img。

<强>演示

＆＃13;

＆＃13;

var str = ` <p>Hello</p>
<p style="text-align: center; "><img src="https://i.stack.imgur.com/CE5lz.png" alt=""><br></p>
<p style="text-align: center; ">Hello</p><br>
<p style="text-align: center; "><img src="https://www.google.co.th/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" alt=""><br></p>
<p style="text-align: left;">Hello World</p><br><br><br>`;

var ele = document.createElement("div");
ele.innerHTML = str;
var image = ele.querySelector("img");
console.log(image.outerHTML);

＆＃13;

＆＃13;

＆＃13;

  

我希望在这种情况下获得第一个图片网址

  console.log(image.src);

Answer 3

您好，请尝试以下代码

document.getElementsByTagName("img")[0].src

Answer 4

另一种解决方案......

document.querySelector('img')

Answer 5

执行此操作的最可靠方法是让浏览器将字符串解析为DOM：

let html = document.createElement('html');
html.innerHTML = you_string;

然后你可以使用jquery例如：

let first = $('img', html)[0];

Answer 6

为图片添加ID，

<img id="someid" src="https://i.stack.imgur.com/CE5lz.png" alt="">

你可以在js中获取图像及其来源

var image = document.getElementById("someid");
var imageSrc = image.currentSrc;