<iframe src="指定URL"></iframe> を削除したい

Question

JavaScriptで文字列の置換に取り組んでいまして、正規表現の書き方でわからない部分があります。宜しくお願い致します。

まず以下strが与えられます。

var str = '残す<iframe width="560" src="http://example/abc" frameborder="0"></iframe>残す';

ここから、

<iframe src="指定URL"></iframe>
を削除して

残す残す
を得たいのですが、私の正規表現は何が間違っているでしょうか？

正規表現は次の通りです。

// iframeのsrcがこのurlであるiframeのみを削除したい
var url = "http://example/abc";
// 削除を実行
var result = str.replace(new RegExp(/<iframe(.+)?\ssrc=("|') + url + ("|')(.+)?>(.+)?</iframe>/g), '');
// 結果をコンソールへ表示
console.log(result); // -> '残す残す' という文字列を得たい

↓KojiDoi様に「url」の連結がおかしいとご指摘頂き、以下に修正しました

// iframeのsrcがこのurlであるiframeのみを削除したい
var url = "http://example/abc";
// 削除を実行
var obj = new RegExp( `<iframe(.+)?\ssrc=("|')` + url + `("|')(.+)?>(.+)?</iframe>`, 'g');
var result = str.replace( obj, '' );
// 結果をコンソールへ表示
console.log(result); // -> '残す残す' という文字列を得たい

正規表現は次の意味を考えて書きました。

<iframe(.+)?
<ifame の次に何らかの文字列があってもなくてもいい

\s
src の手前には必ずスペースがある

src=("|') + url + ("|')
src の値は指定の url で、ダブルクオートまたはシングルクオートで囲まれている

(.+)?>
src 以外の文字列があってもなくてもいい

(.+)?
iframe タグの中には文字列があってもなくてもいい

</iframe>
iframeの閉じタグがある

/g
urlが変数なのでこのオプションが必要

Comments

[m.ts10806]

要求仕様がかなり無茶です。
「やりたいこと」が「より良い手」とは限りません。
とりあえずで動くようになったところで抜け道は沢山できますし、
その抜け道を全部つぶすべく検討するくらいならおおもとから見直した方が良いです。

Answer 1

HTMLの評価は正規表現より冗長にDOMをチェックするほうが楽かもしれません

Comments

[yambejp]

var url = "http://example/abc";
var str = '残す<iframe width="560" src="http://example/abc" frameborder="0"></iframe>残す';
var tmp=Object.assign(document.createElement('div'),{innerHTML:str});
var iframe=tmp.querySelector('iframe');
if(iframe.getAttribute('src')==url){
tmp.removeChild(iframe);
str=tmp.innerHTML;
}
console.log(str);

[Woodwind]

この発想はやばいです。ありがとうございます。

Answer 2

まず、正規表現の中（/と/の間）に文字列+文字列のような式を入れようとしているところがおかしいです。
正規表現を動的に作りたいなら、matchを使う前に然るべきobjectを作りましょう。

参考：
正規表現を使ったマッチングに変数を使用する - Qiita

追記

var obj = new RegExp( `<iframe(.+)?\ssrc=("|')` + url + `("|')(.+)?>(.+)?</iframe>`, 'g');

この\sのバックスラッシュをエスケープする必要があります。

 obj = new RegExp(`<iframe(.+)?\ssrc=("|')` + url + `("|\')(.*)?>(.+)?</iframe>`, 'g')

Comments

[Woodwind]

ありがとうございます。正規表現だけでなく、urlという変数を入れる部分も間違っていたのですね。

仰る流れで「然るべきobject」を作ってみたのですが、

---
ここにあったコードは質問欄に追記しました
---

やはり以下正規表現がネックになっているせいか、実現に至れません…

質問に自分の意図する正規表現を日本語にしていますが、何が間違っているかわかりますでしょうか？

[KojiDoi]

そのコードを、ここではなく質問欄に追記してください。

[Woodwind]

なるほど、見にくかったですね。申し訳ございませんでした。