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

これを行う 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

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>",
    srcWithQuotes = string.match(/src\=([^\s]*)\s/)[1],
    src = srcWithQuotes.substring(1,srcWithQuotes.length - 1);
console.log(src);​

JSフィドルデモ。

src=これは、 （通常の式内で特別な意味を持つため、バックスラッシュでエスケープされます）で始まり=、その後に空白以外の文字（^\s*）が続き、その後に空白が続く文字のシーケンスに効果的に一致します。文字（\s）。

srcこの式は、属性を区切るために使用される引用符を明示的にキャプチャします。これは、変数srcのサブストリングを取得することによって返されます。これは、 （最初​​のゼロ番目の文字が属性区切り文字である必要があります）から始まり、最後の文字の前のインデックス（最後の引用符）までです。属性を区切る）。srcWithQuotes1

ドキュメントフラグメントを使用した、少し複雑な（ただし、信頼性が高い可能性がある）アプローチがあります。

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 3

常に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 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

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 6

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