substring/regex获取字符串中保存的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*)后跟一个空格character(\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();

或RegExp

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