正規表現 URL抽出と逆のことをやりたい

Question

下記コードは出力がhttps://teratail.com/ https://google.com/になりますがこれの逆で
URLを除外してあいうえおabc 不特定文字def_123!@.のみ出力したいです
どうやったらいいんでしょうか？

<script>
window.onload=function(){
str="あいうえおabc https://teratail.com/不特定文字def_123!@.https://google.com/";
if(str.match(/(https?|ftp)(://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+)/gi)){
ss=str.match(/(https?|ftp)(://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+)/gi);
for(i=0;i<ss.length;i++){
alert(ss[i]);
}
}
}
</script>

下記の考え方は無しでお願いします
正規表現でURLだけ除外したものを一発で取る方法はないでしょうか？

<script>
window.onload=function(){
str="あいうえおabc https://teratail.com/不特定文字def_123!@.https://google.com/";
if(str.match(/(https?|ftp)(://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+)/gi)){
ss=str.match(/(https?|ftp)(://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+)/gi);
for(i=0;i<ss.length;i++){
a=str.replaceAll(ss[i],'');
str=a;
}
}
alert(a);
}
</script>

Answer 1

以下でどうでしょ？

(1) まず URL の正規表現を少し修正する。

1. 二つの丸カッコのうち

・1つめのほうを非キャプチャグループにする。（各丸カッコの開く方の後に ?: を追加する。）
・2つめのほうは丸カッコ自体を消す。
2. gオプションを消す。

- /(https?|ftp)(://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+)/gi
+ /(?:https?|ftp)://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+/i

(2) 上記のパターンをデリミタと考えて、対象文字列をsplitする。

const urlPattern = /(?:https?|ftp)://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+/i;

const str = "あいうえおabc https://teratail.com/不特定文字def_123!@.https://google.com/";

const result = str.split(urlPattern);

console.log(result);

こうすると、resultとして以下が得られる。

["あいうえおabc ","不特定文字def_123!@.",""]

(3) 上記のように、str の末尾（や先頭）がURLのパターンに含まれていると、result の中に空文字列が入ってくるので、これを除去するには、splitしたあと、filter する。

const result = str.split(urlPattern).filter(s => s);

???? tera: 365984@codepen

Comments

[ertya]

こんにちは。横から失礼します
私も試行錯誤してましたができませんでしたので参考にさせていただきます

そこで一つお聞きしたいのですが
const urlPattern = /(?:https?|ftp)://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+/i;

const str = "あいうえおabc https://teratail.com/不特定文字def_123!@.https://google.com/";

const result = str.split(urlPattern).filter(s => s);

console.log(result);
によってURLを除去したのち、再度同じ位置にURLを復元させることってできませんでしょうか？
["あいうえおabc ","不特定文字def_123!@."]
となったものを元の位置に戻すと
["あいうえおabc ","https://teratail.com/",不特定文字def_123!@.","https://google.com/"]
に戻すことってできるんでしょうか？

[退会済みユーザー]

@ertyaさん
コメントありがとうございます。

> 再度同じ位置にURLを復元させることってできませんでしょうか？

についてですが、

> 復元させる

ことは難しいですが、はじめから

> ["あいうえおabc ","https://teratail.com/",不特定文字def_123!@.","https://google.com/"]

を取得することは可能です。それには

> const urlPattern = /(?:https?|ftp)://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+/i;

の正規表現（/ と / とで挟まれている部分）全体をキャプチャするように、開始の / の直後に ( を、終端の / の直前に ) を追加して、

const urlPattern = /((?:https?|ftp)://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+)/i;

とします。この (・・・) を追加したurlPatternで

const result = str.split(urlPattern).filter(s => s);

とすると、result には以下のように、urlPattern　にマッチした部分も含まれます。

["あいうえおabc ","https://teratail.com/","不特定文字def_123!@.","https://google.com/"]

???? https://codepen.io/kilesa/pen/NWvpKPQ?editors=0012

Answer 2

replaceではダメでしょうか？？
str.replace(/(https?|ftp)(://[-_.!~*'()a-zA-Z0-9;/?:@&=+$,%#]+)/gi, '')

Comments

[yukinmitu]

できればreplaceは使いたくないのです、、、
matchは一致するものを取得する、その逆（一致しないものを取得する）はmatchではできないんでしょうか？