JavaScript正規表現で「それ以外」という表現を使いたい

Question

###前提・該当のソースコード
正規表現で文字列１文字列２が残るコードを実装しました。

var str = '文字列１<iframe width="560" src="http://example/abc" frameborder="0"></iframe>文字列２';
// srcがこのurlであるiframeだけを削除する
var url = "http://example/abc";
var obj = new RegExp(`<iframe.*?\ssrc=["']` + url + `["'](.*)?>.*</iframe>`)
var result = str.replace( obj, '' );
console.log(result); // -> '文字列１文字列２'

###求めている結果
しかし上記、すべてのiframeが削除されてしまいますが、最初だけでいいのです。

例えばstrを次に変えて、文字列１文字列２<iframe width="560" src="http://example/abc" frameborder="0"></iframe>文字列３を残したいです。

var str = '文字列１<iframe width="560" src="http://example/abc" frameborder="0"></iframe>文字列２<iframe width="560" src="http://example/abc" frameborder="0"></iframe>文字列３';

###考えた原因と対策
おそらくですが、.*によって、最後の</iframe>まですべてを一致としてしまうのではないかと思っています。
なのでこの部分を下記のように変えてみました。

var obj = new RegExp(`<iframe.*?\ssrc=["']` + url + `["'].*>.*</iframe>`);
// ↓下記のように変えてみました
var obj = new RegExp(`<iframe.*?\ssrc=["']` + url + `["'].*>^(?!.*</iframe>)</iframe>`);

^(?!.*</iframe>)で</iframe>という文字を含まないを表現したつもりです。
参考：https://uxmilk.jp/50674

しかし何も削除されなくなってしまいました。。
どうすれば求めている結果になるでしょうか？

Answer 1

HTML文字列を正規表現で処理するのはたいてい泥沼にハマります。対応できないパターンが次々と現れたり、可読性が低かったり、応用が難しかったり。もし出力文字列が同値だけど多少変わってもよいのなら、DOM操作したほうが良いです。

let str = '文字列１<iframe width="560" src="http://example/abc" frameborder="0"></iframe>文字列２<iframe width="560" src="http://example/abc" frameborder="0"></iframe>文字列３';
let url = "http://example/abc";

let container = document.createElement('div');
container.innerHTML = str;
let iframe = container.querySelector(`iframe[src="${url}"]`);
if (iframe)
  iframe.remove();
// これが欲しい結果。エスケープが多少変わることあり。
console.log(container.innerHTML);

Comments

[Woodwind]

この方法が分かりやすくて好みでした。どうもありがとうございます。今後HTMLに対する正規表現で迷ったらこうします。

[Woodwind]

一点よろしいでしょうか。「エスケープが多少変わることあり」というのはどういう意味になりますか？変わってしまうケースと、例えばどう変わるのか、を教えて頂けませんでしょうか。

[int32_t]

例えば、属性値を囲むシングルクオートがダブルクオートになったり、属性の間のスペースが2つ以上あっても1つになったり、テキスト中の > が > になったり、テキスト中の & が & になったりします。HTMLとしての意味は変わりません。

[Woodwind]

なるほどです。ありがとうございます。

Answer 2

^(?!.*</iframe>)で</iframe>という文字を含まないを表現したつもりです。

つもりでしかありません。文字クラス以外に現れた^は、「文字列の先頭」という意味です。

手っ取り早く行うには、.*?として.*を最短一致にしてしまうことかと思います。

Comments

[Woodwind]

「？」は「直前の文字があってもなくてもいい」だと思っていましたが、「最短一致」という意味になることもあるのすか。難しいですね~。ありがとうございます。

[maisumakun]

上に書いた^もそうですが、正規表現では周囲の状況で意味が変わる文字もあります。

[Woodwind]

みなさんそれをマスターしていらっしゃるわけですね…ガンバリマス

[Daregada]

この使い方の「?」は単独で使うのではなく、「*?」とか「+?」のように直前に特定のメタ文字があります。

Answer 3

最初のiframeが合致しない場合2番目を評価する必要があるのかなど
仕様を固める必要があります。

Comments

[yambejp]

それぞれ評価するなら
var url = "http://example/abc";
var str = '文字列１<iframe width="560" src="http://example/abc" frameborder="0"></iframe>文字列２<iframe width="561" src="http://example/abc" frameborder="0"></iframe>文字列３';
var tmp=Object.assign(document.createElement('div'),{innerHTML:str});
tmp.querySelectorAll('iframe').forEach(iframe=>{;
if(iframe.getAttribute('src')==url){
tmp.removeChild(iframe);
}
});
str=tmp.innerHTML;
console.log(str);

ただし、これだとすべて置換してしまうので、仕様にあわせて条件を追加する必要があります

[Woodwind]

たしかに言われてみれば、仕様が定まっていませんでした。もう少し考えます。
しかし前回のご回答もございますので、仕様がなんであれ教えて頂いたコードで対応できそうです。おかげ様で助かりました。
いつもありがとうございます。

Answer 4

他の部分は見てませんが、

おそらくですが、.*によって、最後の</iframe>まですべてを一致としてしまうのではないかと思っています。

なのでこの部分を下記のように変えてみました。

.*を.*?に変えれば良いだけでは？その前に使っているので機能はご存じですよね？

Comments

[Woodwind]

「？」は「直前の文字があってもなくてもいい」だと思っていました。。

[otn]

？？
では、どんなつもりで、
iframe.*?\ssrc=
と書いたのでしょう？

[Woodwind]

どうでもいい説明になってしまうと思いますが。

そこはもともと
「.+?」（何かの文字が1文字以上、それがあってもなくてもいい）
と書いていた。
しかし調べると
「.*」（何かの文字が0文字以上）
でも同じ意味を表現できると知った。
そこで後者に書き換えようとしたが「?」を除き忘れて「.*?」と質問に記載してしまった。

というかなりどうでもいい経緯でして…不注意でお恥ずかしい限りです。。

[otn]

・そもそも知らなかった
・タイプミスであった
ということですね。理解できました。

[Daregada]

「（何かの文字が1文字以上、それがあってもなくてもいい）」という理解が間違っています。