子字符串/正则表达式以获取字符串中保存的 SRC 值

substring/regex to get a src value held in a string

本文关键字：字符串 保存 SRC 获取 正则表达式      更新时间：2023-09-26

我有一个值为：

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>"

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

如何使用 JavaScript 执行此操作？

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

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);

如果它总是 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);   
}
​

现场演示

一种方法如下：

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 属性的引号，通过获取 srcWithQuotes 变量的子字符串返回src，从 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()...(。

Native 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

假设您要专门匹配<img>标记中的src属性。您可以使用此正则表达式，因为它将与标记匹配，仍然保留它可能具有的其他属性以及 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>');

你可以使用

jQuery 来做到这一点，使用 find 方法，获取图像的 src 属性。

var str = '<img src="/uploads/thumbnail/79a23278ec18b2fc505b06ab799d5ec672094e79.jpg">';
var result = $(str).find('img').eq(0).attr('src');  //  get a image src

Faccy 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
相关文章：