[解決済み] プレーンなURLをリンクに置き換えるには?
2022-03-21 22:49:30
質問
以下の関数を使って、指定されたテキスト内のURLとマッチングさせ、HTMLリンクに置き換えています。正規表現はうまくいっているのですが、現在、最初にマッチしたものだけを置き換えています。
すべてのURLを置換するにはどうすればよいですか?私は エグゼクティブ コマンドを実行する必要がありますが、その方法がよく分かりませんでした。
function replaceURLWithHTMLLinks(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;
return text.replace(exp,"<a href='$1'>$1</a>");
}
解決方法は?
まず、URLをパースするための独自の正規表現をロールバックすることは ひどい考え . この問題は、誰かが書いて、デバッグして、そして テスト済み によると、そのためのライブラリは RFC . URIは複雑 - をチェックします。 Node.jsでURLパースするためのコード というWikipediaのページがあります。 URIスキーム .
URLのパースに関しては、エッジケースが山ほどあります。
国際ドメイン名
, 実際の (
.museum
) vs. 存在しない (
.etc
) TLD、変な句読点など
括弧
URLの末尾の句読点、IPV6ホスト名など。
を調べてみました。 1トン の ライブラリ そして、いくつかの欠点があるにもかかわらず、使用する価値のあるものがいくつかあります。
- ソープボックスの リンク化 は、かなり力が入っているようです。 2015年6月に行われた大規模リファクタリング jQueryへの依存を排除 . まだ IDNに関する問題 .
- アンカーミー は、その新参者である より高速であると主張する よりスリムになりました。いくつかの IDN問題 にも対応しています。
-
Autolinker.js
は、非常に具体的に機能をリストアップしています (例.
HTML入力を適切に処理します。このユーティリティは
href
属性は、アンカー()タグの中にある" ). を使用した場合のテストをいくつか投げてみます。 デモが利用できるようになります .
このタスクのために素早く失格させたライブラリ。
- Django の urlize は特定の TLD を適切に処理しませんでした。 (以下は、公式の 有効なTLDのリスト . デモなし .
- autolink-js は http:// のない "www.google.com" を検出しないので、プレーンテキストにある "casual URL" (スキームやプロトコルのない)自動リンクにはあまり適さないでしょう。
- ベン・アルマンのlinkify は2009年以降メンテナンスされていない。
正規表現にこだわるのであれば、最も包括的なのは URL正規表現 from Component ただし、これを見ると、存在しない2文字のTLDを誤検出することがあります。
関連
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
[解決済み】<select>で現在選択されている<option>をJavaScriptで取得するにはどうすればよいですか?
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでメールアドレスを検証するのに最適な方法は何ですか?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
jQueryのコピーオブジェクトの説明
-
vueにおけるfilterの適用シーンについて解説します。
-
vueのプロジェクトでモックを使用する方法を知っていますか?
-
[解決済み】JavaScriptの配列でforEachが関数でない不具合
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み】ExpressJS - throw er Unhandled errorイベント
-
[解決済み】React-Redux: アクションはプレーンオブジェクトでなければならない。非同期アクションにはカスタムミドルウェアを使用する