JavaScript 変数内の重複したURLを取り除きたい

Question

変数内の重複したURLを取り除きたいです
結果として
こんにちはhttps://yahoo.co.jp/こんばんはおはようhttps://google.com/という形が変数に格納されてる状態にしたいです

下記まではできていますが、ここからどう処理していけばいいかわかりません
replaceなどを使うのか、だとしても1つ目は残し、それ以降を消すとか可能なんでしょうか

追記
当方初心者なのでアロー関数？とか、複雑なコードはわかりません
できれば、少し手を加えただけで実現できないかと考えていますが難しいでしょうか

<script>
window.onload=function(){
s="こんにちはhttps://yahoo.co.jp/こんばんはhttps://yahoo.co.jp/おはようhttps://google.com/";
if(s.match(/(https?|ftp)(://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+)/gi)){
aa=s.match(/(https?|ftp)(://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+)/gi);
a = new Set(aa);
a = Array.from(a);//重複はなくなるがどうしたら元の変数を保持し、その中身の重複を消すのか？
for(i=0;i<a.length;i++){
alert(a[i]);//https://yahoo.co.jp/ https://google.com/
}
}
}
</script>

<script>
window.onload=function(){
s="こんにちはhttps://yahoo.co.jp/こんばんはhttps://yahoo.co.jp/おはようhttps://google.com/";
if(s.match(/(https?|ftp)(://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+)/gi)){
aa=s.match(/(https?|ftp)(://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+)/gi);
a = new Set(aa);
a = Array.from(a);
console.log(a);
for(i=0;i<a.length;i++){
s=s.replace(a[i],"");//これだとこんにちはこんばんはhttps://yahoo.co.jp/おはようになってしまう
}
}
alert(s);//こんにちはこんばんはhttps://yahoo.co.jp/おはよう
}
</script>

Answer 1

当方初心者なのでアロー関数？とか、複雑なコードはわかりません

あっそー。じゃ、初心者脱出のお手伝いをさせてください。

const s = "こんにちはhttps://yahoo.co.jp/こんばんはhttps://yahoo.co.jp/おはようhttps://google.com/ごきげんようhttps://google.com/さようならhttps://yahoo.co.jp/";

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

const result = s.replace(regexp, (m, _1, _2, i) => s.indexOf(m) === i ? m : '');

console.log(result);

"こんにちはhttps://yahoo.co.jp/こんばんはおはようhttps://google.com/ごきげんようさようなら"

???? サンプル

追記

コメントからの

const s = "こんにちはhttps://yahoo.co.jp/\r\nこんばんはhttps://yahoo.co.jp/\r\nおはようhttps://google.com/\r\nごきげんようhttps://google.com/ さようならhttps://yahoo.co.jp/\r\n";

となって\r\n(改行コードがあった場合も)をURL含め削除するにはどうしたらいいでしょうか？

についてですが、先に回答したコードの正規表現に、以下のように

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

末尾に (\r\n)? を追加しておいて、これにあわせてreplace に渡す関数を以下のように修正するとよいかと思います。

- const result = s.replace(regexp, (m, _1, _2, i) => s.indexOf(m) === i ? m : '');
+ const result = s.replace(regexp, (m, _1, _2, _3, i) => s.indexOf(m) === i ? m.trim() : '');

???? サンプル

Comments

[melian]

Great！

[akatsuka1794]

勉強させてください。。
const s = "こんにちはhttps://yahoo.co.jp/\r\nこんばんはhttps://yahoo.co.jp/\r\nおはようhttps://google.com/\r\nごきげんようhttps://google.com/ さようならhttps://yahoo.co.jp/\r\n";
となって\r\n(改行コードがあった場合も)をURL含め削除するにはどうしたらいいでしょうか？

const result = s.replace(regexp, (m, _1, _2, i) => s.indexOf(m) === i+'\r\n' ? m : '');
で行けるかと思ったら、、、だめでした
おわかりでしたら教えていただけると幸いです

[退会済みユーザー]

@melianさん　
ありがとうございます m(_ _)m

@akatsuka1794さん
コメントありがとうございます。回答のほうに追記しました。

[akatsuka1794]

ばっちりでした、、
現時点でアロー関数はわけわかりませんが、これから勉強します
ありがとうございました

[akatsuka1794]

お世話になります
また教えていただきたいのですが
下記コードで重複した@***の1つ目以降を取り除きたいのですがうまく動いてくれません
結果としては「@a @abc @b あいうえお」が残る形にしたいのですが、どうしたらいいでしょうか？

<script>
window.onload=function(){
regexp=/@[A-Z0-9]+/ig;
str="@a @abc @a @b あいうえお";
strA = str.replace(regexp, (m, _1, _2, _3, i) => str.indexOf(m) === i ? m.trim() : '');
alert(strA);
}
</script>

[退会済みユーザー]

こんにちは

まず、回答のほうに書いた修正後のコードのほうをおさらいしますと、

const result = s.replace(regexp, (m, _1, _2, _3, i) => s.indexOf(m) === i ? m.trim() : '');

で、replace の第二引数に与えている関数の引数（ => の前のカッコの中）は

m, _1, _2, _3, i

という５個ですが、この中で、アンダーバーで始まるものを

_1, _2, _3

と、３つ与えています。これがなぜ3つなのかといえば、replace の第一引数に与えている正規表現regexpが、

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

というものになっており、この regexp はキャプチャするための丸カッコのくくり (・・・)　が以下のように３つあるからです。

(https?|ftp)

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

(\r\n)

これらの (・・・) にマッチした部分が引数_1, _2, _3　に入ってきます。ちなみに変数名をアンダーバーで始めているのは、これらは関数本体で使用しない変数なので、慣習的にアンダーバーで始めています。

上記をふまえて、あらたにコメントからご質問の正規表現

regexp = /@[A-Z0-9]+/ig;

は、キャプチャする丸カッコのくくりが無いです。

したがって、replace の第二引数に与えている関数の引数には、先のURLを取得するほうのreplaceで、第二引数に与えていた関数の引数

m, _1, _2, _3, i

の、1, _2, _3 は、変数名の意図としては「正規表現に含まれるキャプチャの左から1番目、2番目、3番目 」というものですが、

regexp = /@[A-Z0-9]+/ig;

にはキャプチャがないので、用をなさない引数になってしまいます。結論をいうと、正規表現が

regexp = /@[A-Z0-9]+/ig;

というキャプチャがないものになるのであれば、replace の第二引数に与えている関数の引数は

m, _1, _2, _3, i

ではなくて、ここから _1, _2, _3 を取り去った

m, i

だけでよいです。つまりreplace の第二引数に与える関数は

(m, i) => str.indexOf(m) === i ? m.trim() : ''

でうまくいくと思います。

詳細は、一度、以下をよく読んでおくことをおすすめします。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace#specifying_a_function_as_a_parameter

上記の仕様で、p1, p2, ...　と書いてある変数名を、関数本体で使わないので、先述のとおり慣習にならい、

_1, _2, _3

としています。

[退会済みユーザー]

補足

コメントからご質問の、

> regexp=/@[A-Z0-9]+/ig;
> str="@a @abc @a @b あいうえお";

という場合に、

> strA = str.replace(regexp, (m, _1, _2, _3, i) => str.indexOf(m) === i ? m.trim() : '');

としたときに、replace の第二引数に与えている関数

(m, _1, _2, _3, i) => str.indexOf(m) === i ? m.trim() : ''

の本体（=>の後）のほうの

str.indexOf(m) === i ? m.trim() : ''

では引数の変数 i を、三項演算子の条件部分で使っていますが、このときの i に受け取りたい想定のインデクスは、正規表現にキャプチャがないので、引数 _1 に入ってきます。ですから

(m, _1, _2, _3, i) => str.indexOf(m) === i ? m.trim() : ''

の関数本体のほうの i を _1 に修正して

(m, _1, _2, _3, i) => str.indexOf(m) === _1 ? m.trim() : ''

とすると意図通り動くことも確認すると、より理解が深まると思います。

[退会済みユーザー]

ログイン情報がわからなくなってしまったため、アカウント作りなおしました
わざわざ丁寧に解説いただきありがとうございます
何度も読み直して理解していこうと思います

[退会済みユーザー]

お世話になります
以前書いていただきました、コードで
URLが重複していた場合のみに、\r\n含め消すというソースだったと思うのですが、

重複していない場合も消される事がわかりました
↓
重複していた場合のみ、\r\nがついていれば\r\nも、\r\nなければ重複したURLのみとしたい場合、どうしたらいいでしょうか・・・？

<script>
window.onload=function(){
s = "https://yahoo.co.jp/\r\nhttps://google.com/\r\n";
regexp = /(https?|ftp)(://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+)(\r\n)?/gi;
s = s.replace(regexp, (m, _1, _2, _3, i) => s.indexOf(m) === i ? m.trim() : '');
console.log(s);//重複していないのに\r\nが消えている
}
</script>

[退会済みユーザー]

宜しければ回答いただけると幸いです＞＜

[退会済みユーザー]

これでよかったかは、わかりませんが一応目的になりました。。。
<script>
window.onload=function(){
s = "https://yahoo.co.jp/\r\nhttps://google.com/\r\n";
regexp = /(https?|ftp)(://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+)(\r\n)?/gi;
s = s.replace(regexp, (m, _1, _2, _3, i) => s.indexOf(m) === i ? m.trim()+"\r\n" : '');
console.log(s);//重複していないのに\r\nが消えている
}
</script>

[退会済みユーザー]

こんにちは。 m.trim() の .trim() が不要だったかもしれません。

修正前
s = s.replace(regexp, (m, _1, _2, _3, i) => s.indexOf(m) === i ? m.trim() : '');

修正後
s = s.replace(regexp, (m, _1, _2, _3, i) => s.indexOf(m) === i ? m : '');

回答に書くコードは、質問にある入力例とそれに対する望ましい結果だけを見て作っているものですので、他の入力例だと、また望ましくない結果になることはあると思います。ぜひ今回のように自力で挑戦してみるとよいでしょう。

Answer 2

わかりやすさ優先(?)で書いてみました。

const s="こんにちはhttps://yahoo.co.jp/こんばんはhttps://yahoo.co.jp/おはようhttps://google.com/";

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

const a = s.split(urlpattern);
for(let i=0; i<a.length; i++){
    if(a[i].match(urlpattern) && a.indexOf(a[i])<i){
        a[i]="";
    }
}
const result=a.join("");

1．文字列をURLで配列に分割。URLも含めて。
2．配列要素を順に見て、URLであり、同じものがそれ以前にあれば、空文字列にする
3．配列を連結する

splitの際に正規表現を括弧で囲んでおくと、それも分割後に残ります。

Comments

[akatsuka1794]

このコードであれば私でも何とか理解できそうです。
ありがとうございます。

Answer 3

判定しながらreplaceをループで処理してはどうでしょうか？

const reg=/((?:https?|ftp)(?:://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+))(.+?)(\1)/gi;
var txt=`こんにちはhttps://yahoo.co.jp/こんばんはhttps://yahoo.co.jp/おはようhttps://google.com/`;
var res=txt;
while(reg.test(res)){
  res=res.replace(reg,"$1$2");
}
console.log(res);

Comments

[akatsuka1794]

(´_ _)ありがとうございます

[akatsuka1794]

アロー関数はよくわからないという前提で提示してくださったにも関わらず、
ベストアンサーを選べず申し訳ありません。
目的の動作を確認できており、こちらもベストアンサーです。

Answer 4

あるURLが最初に現れたときは削除しない、2回目以降に現れた場合は削除したいということは、URLにマッチしたときに少なくともマッチした場所も取得できないといけません。Stringのmatch()では場所の取得ができないので、使えません。

matchAll()の戻り値でループして、SetにマッチしたURLが入っていない場合は入れる、入っていた場合は場所と長さを記録してリストに保存しておきます。そのリストを逆順に処理して、場所と長さを逆順に削り取ればよいです。

Comments

[akatsuka1794]

ありがとうございます…φ(´ー｀*)

[akatsuka1794]

よくよく考えたら
aa=s.match(/(https?|ftp)(://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+)/gi);
a = new Set(aa);
a = Array.from(a);//重複はなくなるがどうしたら元の変数を保持し、その中身の重複を消すのか？
とか全く無意味な処理を考えていました
もっと頭が良くなりたいです