javascript - 子字符串/正则表达式以获取保存在字符串中的 src 值

Question

我有一个带有值的字符串：

var string = "<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>"

如果可能的话，我想在字符串的属性部分中URL保留。src

如何使用 JavaScript 做到这一点？

Answer 1

一种方法是使用正则表达式。

var str = "<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>";

var regex = /<img.*?src='(.*?)'/;
var src = regex.exec(str)[1];

console.log(src);

Answer 2

替代方法，如果它总是 html 数据。

var string ="<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>";

var elem= document.createElement("div");
elem.innerHTML = string;

var images = elem.getElementsByTagName("img");

for(var i=0; i < images.length; i++){
   console.log(images[i].src);   
}
​

现场演示

Answer 3

一种方法如下：

var string = "<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>",
    srcWithQuotes = string.match(/src\=([^\s]*)\s/)[1],
    src = srcWithQuotes.substring(1,srcWithQuotes.length - 1);
console.log(src);​

JS 小提琴演示。

这有效地匹配以src=（=用反斜杠转义的字符序列，否则它在正则表达式中具有特殊含义），后跟一系列非空白字符 ( ^\s*)，后跟一个空白字符 ( \s)。

此表达式显式捕获用于分隔src属性的引号，src通过获取srcWithQuotes变量的子字符串返回，从1（第一个，第零个字符应该是属性分隔符）开始直到最后一个字符之前的索引（最终引号定界属性）。

使用文档片段有一种稍微复杂（但可能更可靠）的方法：

var string = "<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>",
    temp = document.createElement('div'),
    frag = document.createDocumentFragment();

temp.innerHTML = string;
frag.appendChild(temp);
console.log(temp.getElementsByTagName('img')[0].src);​​​​​​

JS 小提琴演示。

当然，在本例中，您可以使用任何您喜欢的方法在temp节点 ( getElementById(), getElementsByClassName()...) 中查找图像。

Answer 4

本机 DOM（将导致 GET）

var str = "<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>",
d = document.createElement('div'),
srcs = [];
d.innerHTML = str;
srcs = Array.prototype.slice.call(d.querySelectorAll('[src]'),0);
while( srcs.length > 0 ) console.log( srcs[0].src ), srcs.shift();

或正则表达式

var str = "<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>",
re = /\ssrc=(?:(?:'([^']*)')|(?:"([^"]*)")|([^\s]*))/i, // match src='a' OR src="a" OR src=a
res = str.match(re),
src = res[1]||res[2]||res[3]; // get the one that matched

src; // http://api.com/images/UID

Answer 5

假设您要专门匹配标签src中的属性。<img>您可以使用此正则表达式，因为它将匹配标签，仍然保留它可能具有的其他属性以及src属性内的其他内容：

var matches = string.match(/<img([^>]+)src="[/]?([^"]+)"([^>]*)>|<( *)img( *)[/>|>]/g);

它可以改进，但适用于某些类型的打字。

例如，如果你想匹配<img>甚至<img src="/200px-Unofficial_JavaScript_logo_2.svg.png" alt="" width="100" height="172" />添加一些东西到 url，你可以做以下替换：

string.replace(/<img([^>]+)src="[/]?([^"]+)"([^>]*)>|<( *)img( *)[/>|>]/g, '<img $1src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/$2" $3>');

Answer 6

您可以使用 jQuery 来执行此操作，使用 find 方法，获取图像的 src 属性。

var str = '<img src="/uploads/thumbnail/79a23278ec18b2fc505b06ab799d5ec672094e79.jpg">';

var result = $(str).find('img').eq(0).attr('src');  //  get a image src 

Answer 7

Facciy 2015：通过 DOM 使用 jQuery 和 CofeeScript

str = '<img alt='' src='http://api.com/images/UID' /><br/>Some plain text<br/><a href='http://www.google.com'>http://www.google.com</a>'

img = $(@.content).find('img').each ()->
  srcimg = $(@).attr('src')
  console.log srcimg