投稿フォームに日本語が含まれる以下のようなテキスト(urlだと推察されるもの)が投稿された場合、jsでリンクにしたいです。
https://モンスターストライク.gamewith.jp/
※PCからココに貼ると、以下のようなURLにエンコード?されてしまいますが・・。
https://xn--eckwa2aa3a9c8j8bve9d.gamewith.jp/
現在のコードは以下の通りです。これで日本語以外の場合であれば問題なくURLに変換出来ています。
javascript
1$(".text").each(function(){ 2 $(this).html($(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, ' <a href="$1" class="link" target="_blank">$1</a> ') ); 3 });
日本語が含まれている場合もリンク化対応する場合はどうすれば良いのでしょうか??
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答5件
0
ベストアンサー
IRIの識別
ご質問のような、URLと同様の書式に日本語文字なども含められるものを国際化資源識別子 (IRI) といいます。テキスト中のIRIを識別できるようにする方法については、JPRSから提案があります。
- 日本語.jp 登録・運用・サポート: 電子メール本文中の日本語ドメイン名URLをクリックできるようにするには
大雑把に言うと、テキスト中で次のようなものが見つかれば、IRIと見なせばよさそうです (詳しくは『日本語ドメイン名URLクリック対応アプリケーション開発者ガイド』「3. 日本語ドメイン名URLの定義」を参照)。
https?:\/\/[^\s<>"]+ にマッチし、かつ、ホスト部の途中が [..。。] にマッチする (なお、\sは全角空白を含むものとする)。
IRIとリンク
他の方からご指摘があるように、HTMLでリンクの属性値はURLなので(*)、日本語文字などを含めるのであればホスト部はpunycode符号化、ほかの部分はパーセント符号化しなければならないはずです。
(*) 正確には「URI」ですが、ここでは「URL」と書きます。
ただ、punycodeで正しく符号化するのは、クライアントサイドのjavascriptでは難しいと思います (スプーフィングなどを十分に防げませんし)。
正しいURLによるリンクを表示したければ、入力をいったんサーバで受け取って、サーバサイドでリンク用のURLを生成することが必要です。
どうしてもクライアントサイドで、ということなら、次善の策として「IRIをそのままリンクに使う」という方法も考えられます。最近のブラウザは多くのものが、リンクの属性値にIRIがあってもURLとして解釈してくれるようです (実際[日本語.jp](http://日本語.jp/)
と書いてできる日本語.jpはIRIによるリンクになりますが、私の環境ではアクセスできます)。環境依存ですが、検討する価値はあると思います。
なおIRIをリンクの属性値に使うときも、パーセント符号化はするべきでしょう。この場合、文字コードはUTF-8を前提にするのがよいと思います。
投稿2016/12/23 05:22
編集2016/12/23 08:22総合スコア4227
0
こういうのはいかがでしょう?
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6</head> 7<body> 8<form> 9 <label for="text1"> 10 http://不要 11 <input id="text1" type="text"> 12 </label> 13 <input onclick="url();return false;" type="submit"> 14</form> 15<div id="result"> 16 17</div> 18<script> 19 function url() { 20 while (document.getElementById("result").hasChildNodes()) { 21 document.getElementById("result").removeChild(document.getElementById("result").firstChild); 22 } 23 var url = document.getElementById("text1").value; 24 var alink = document.createElement("a"); 25 alink.href = "http://" + encodeURI(url); 26 alink.text = alink.href; 27 document.getElementById("result").appendChild(alink); 28 } 29</script> 30</body> 31</html>
投稿2016/12/22 16:24
総合スコア14731
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
誤爆するリスク
日本語ドメインに対応すると誤爆の危険性が高くなるので原則お勧めはしません。
https://から始まって.jpで終わるURL http://で始まって.comで終わるURL.jp http://ほげほげ.com/テスト/インデックス.html
https://から始まって.jp
はURLとして認識させますか。http://で始まって.comで終わるURL.jp
はURLとして認識させますか。それとも、http://で始まって.com
までがURLですか。http://ほげほげ.com/テスト/インデックス.html
はURLとして認識させますか。ディレクトリ名、ファイル名に日本語を含めることを認めますか。それとも、パーセントエンコードしていないので認めませんか。- ディレクトリ名、ファイル名に日本語を含めることを認めるとしたら、パーセントエンコードする際の文字コードはどうやって決定しますか。
「日本語の文章」と「日本語ドメイン」が混在した時、どこまでがURLかを機械的に判断することが出来ません。
Punycode変換されたURLでリンクする
実際のところ、https://xn--eckwa2aa3a9c8j8bve9d.gamewith.jp/
からリンクさせるのが現実的だと思います。
http://qiita.com/weal/items/5c0ffefc44cfe7525cbe
Re: gogoackman3 さん
投稿2016/12/22 23:41
総合スコア18156
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
これはPunycode変換されたURLです。
これを用いることで日本語のドメインをASCIIに変換することができます。
参考) Punycode - Wikipedia
投稿2016/12/22 15:26
編集2016/12/22 15:28総合スコア36
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
日本語のままリンクにすればいいのではないでしょうか?
<a href="https://モンスターストライク.gamewith.jp/">モンスト</a>
投稿2016/12/22 13:45
総合スコア4267
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/22 13:54
2016/12/22 14:46
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/26 06:00 編集
2016/12/26 06:05
2016/12/26 08:19 編集