Javascriptでhttp://で始まる文字を自動リンクさせようと思うのですが、( が含まれていると正常リンクできないので良い感じに自動リンクできるようにしたい。

Question

Javascriptでhttp://で始まる文字を自動リンクさせようと思うのですが、( が含まれていると正常リンクできないので良い感じに自動リンクできるようにしたいです。

参考させていただいたものをコピペしたんですが、恥ずかしながらJavascriptが分からず…
出来る限りJqeuryとかライブラリを使わず素のJavascriptを使いたい。

var text = "ヤフーニュースです。(https://news.yahoo.co.jp/)";
text = text.replace(
    /((http|https|ftp|ftps)\://[a-zA-Z0-9\-.]+.[a-zA-Z]{2,3}(/\S*)?)/g,
    '<a href="$1">$1</a>'
);
console.log(text)

出力結果

ヤフーニュースです。(<a href="https://news.yahoo.co.jp/)">https://news.yahoo.co.jp/)</a>

Comments

[Lhankor_Mhy]

これ、カッコの問題ではないですよ。"ヤフーニュースです。https://news.yahoo.co.jp/ヤフーニュースでした。" は "ヤフーニュースです。<a href="https://news.yahoo.co.jp/ヤフーニュースでした。">https://news.yahoo.co.jp/ヤフーニュースでした。</a>" となりました。

Answer 1

タグはありませんが、どちらかというと正規表現の問題ですね。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions
\Sが)を含んでしまっているので、適当に置き換えます。

var text = "ヤフーニュースです。(https://news.yahoo.co.jp/)";
text = text.replace(
    /((http|https|ftp|ftps)\://[a-zA-Z0-9\-.]+.[a-zA-Z]{2,3}(/[%!#$&'(*+,/:;=?@[]0-9A-Za-z._~-]*)?)/g,
    '<a href="$1">$1</a>'
);
console.log(text)

問題は、次のような本当に)を含むときに切られてしまうだろうということ。
https://msdn.microsoft.com/ja-jp/library/system.string(v=vs.90).aspx

さて、厳密にはURIはRFC3986で定義されているのでよく読めば何を使えばいいかわかります(この回答では読んでいません！)。
→ 実際にはこれを置き換えようとしているURL Living Standardのほうを参照したほうがいいかもしれません。
https://triple-underscore.github.io/URL-ja.html

Answer 2

ご所望どおりの動作となっているか分かりませんが・・・

text = text.replace(
    /((http|https|ftp|ftps)\://[a-zA-Z0-9\-.]+.[a-zA-Z]{2,3}/\S*?)/g,
    '<a href="$1">$1</a>'
);

(/\S*)?)の()を取っ払っただけです。

3パターン試しました。

１．ご提示のもの。

ヤフーニュースです。(https://news.yahoo.co.jp/)
→
ヤフーニュースです。(<a href="https://news.yahoo.co.jp/">https://news.yahoo.co.jp/</a>)

２．全角かっこ
ヤフーニュースです。（https://news.yahoo.co.jp/）
→
ヤフーニュースです。（<a href="https://news.yahoo.co.jp/">https://news.yahoo.co.jp/</a>）

３．かっこなし
ヤフーニュースです。https://news.yahoo.co.jp/
→
ヤフーニュースです。<a href="https://news.yahoo.co.jp/">https://news.yahoo.co.jp/</a>

追記[16:32]

別サイトを参考に修正してみました。

• javascript 文字列からURLを抽出しAタグを張る関数。

「http://で始まる文字を」とのことなのでftp,ftpsを除外しています。
（含めたい場合は冒頭部分をちょっと修正する必要がありますね

function urlLink(text){
 text = text.replace(
   /((h?)(ttps?://[a-zA-Z0-9.\-_@:/~?%&;=+#',*!]+))/g,
    '<a href="$1">$1</a>'
 );

 console.log(text);   
}
    

urlLink("ヤフーニュースです。(https://news.yahoo.co.jp/)"); //ご提示のもの
//ヤフーニュースです。(<a href="https://news.yahoo.co.jp/">https://news.yahoo.co.jp/</a>)

urlLink("ヤフーニュースです。（https://news.yahoo.co.jp/）"); //全角かっこ
//ヤフーニュースです。（<a href="https://news.yahoo.co.jp/">https://news.yahoo.co.jp/</a>）
    
urlLink("ヤフーニュースです。https://news.yahoo.co.jp/"); //かっこなし
//ヤフーニュースです。<a href="https://news.yahoo.co.jp/">https://news.yahoo.co.jp/</a>
    
urlLink("ヤフーニュースhttps://news.yahoo.co.jp/です。"); //テキストの途中に含む場合
//ヤフーニュース<a href="https://news.yahoo.co.jp/">https://news.yahoo.co.jp/</a>です。
    
urlLink("https://news.yahoo.co.jp/ヤフーニュースhttps://news.yahoo.co.jp/です。"); //複数含む場合
//<a href="https://news.yahoo.co.jp/">https://news.yahoo.co.jp/</a>ヤフーニュース<a href="https://news.yahoo.co.jp/">https://news.yahoo.co.jp/</a>です。
    
urlLink("ヤフーニュースhttps://news.yahoo.co.jpです。"); // スラッシュで終わらない
//ヤフーニュース<a href="https://news.yahoo.co.jp">https://news.yahoo.co.jp</a>です。
    
urlLink("ヤフーニュースhttps://news.yahoo.co.jp/aです。"); // スラッシュで終わらない（階層あり）
//ヤフーニュース<a href="https://news.yahoo.co.jp/a">https://news.yahoo.co.jp/a</a>です。
    
urlLink("ヤフーニュースhttps://news.yahoo.co.jp/a/です。"); // 階層ありでスラッシュで終わる
//ヤフーニュース<a href="https://news.yahoo.co.jp/a/">https://news.yahoo.co.jp/a/</a>です。
    
urlLink("ヤフーニュースhttps://news.yahoo.co.jp/a/ab/abc/abcdです。"); // 階層いっぱい
//ヤフーニュース<a href="https://news.yahoo.co.jp/a/ab/abc/abcd">https://news.yahoo.co.jp/a/ab/abc/abcd</a>です。

urlLink("ヤフーニュースhttps://news.yahoo.co.jp/a/ab/?key=valueです。"); // クエリ
//ヤフーニュース<a href="https://news.yahoo.co.jp/a/ab/?key=value">https://news.yahoo.co.jp/a/ab/?key=value</a>です。
    
urlLink("ヤフーニュースhttps://news.yahoo.co.jp/a/ab/?key=value&key2=value2です。"); // クエリ複数
//ヤフーニュース<a href="https://news.yahoo.co.jp/a/ab/?key=value&key2=value2">https://news.yahoo.co.jp/a/ab/?key=value&key2=value2</a>です。

Comments

[m.ts10806]

あ。これだと完璧ではないですね。
https://news.yahoo.co.jp/a
というURLだった場合に最後の「a」が無視されてしまいます。
/a/b/ などドキュメントルート以降の区切りに対応できてません。
ちょっと考え直してみます。

[m.ts10806]

正規表現のアプローチの仕方がかわっていますが一通り思いつくパターンは試したものです。参考にしてください