質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

5回答

4784閲覧

【jQuery】日本語が含まれるテキストをリンク化したい

gogoackman3

総合スコア109

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/12/22 13:17

編集2016/12/22 15:07

投稿フォームに日本語が含まれる以下のようなテキスト(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ページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

ベストアンサー

IRIの識別

ご質問のような、URLと同様の書式に日本語文字なども含められるものを国際化資源識別子 (IRI) といいます。テキスト中のIRIを識別できるようにする方法については、JPRSから提案があります。

大雑把に言うと、テキスト中で次のようなものが見つかれば、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
ikedas

総合スコア4227

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gogoackman3

2016/12/26 06:00 編集

ご丁寧にありがとうございます。 色々検討した結果、以下のようなシンプルな実装にしたのですが、iPhoneのみ問題が発生しています。(パーセント符号化はよくわからず未実装のままです。。。) $(this).html($(this).html().replace(/((http|https):\/\/[^\s<>"]+)/g, ' <a href="$&" class="link" target="_blank">$&</a> ') ); PCだと問題なくリンクになるのですが、iPhoneのsafariで確認すると、なぜか日本語ドメインが含まれているとaタグではなく、文字列になってしまいます。 スマートフォンだけブラウザの仕様が異なるといったことはあるのでしょうか? 【追記】 スマホだけではなく、本番環境だとPCでもスマホでもaタグにならないようなので、調査中です。
ikedas

2016/12/26 06:05

あると思います。jQueryの.html()の挙動がブラウザによって異なるのでしょう。
gogoackman3

2016/12/26 08:19 編集

ありがとうございます。単純にアセットをプリコンパイルし忘れてました・・・。(railsで開発中) 皆さまご丁寧に回答頂いたのですが、一応前述のコードで実装させて頂いたので、ベストアンサーとさせて頂きます。
guest

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

s8_chu

総合スコア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

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

https://xn--eckwa2aa3a9c8j8bve9d.gamewith.jp/

これはPunycode変換されたURLです。
これを用いることで日本語のドメインをASCIIに変換することができます。
参考) Punycode - Wikipedia

投稿2016/12/22 15:26

編集2016/12/22 15:28
s8079

総合スコア36

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

日本語のままリンクにすればいいのではないでしょうか?
<a href="https://モンスターストライク.gamewith.jp/">モンスト</a>

投稿2016/12/22 13:45

turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gogoackman3

2016/12/22 13:49

そのままリンクにするという事は、replaceの対象から外すという事ですよね?? 大変恐縮ですが、具体的にreplaceの正規表現をどのように変更すれば良いのでしょうか?? /uにすると日本語のようなマルチバイト文字に対応出来るというところまでは把握出来たのですが・・・。
gogoackman3

2016/12/22 13:54

使用シーンとしては、ユーザーがコメントするようなフォームがあり、そのフォームの内容で、URLらしき文字列が存在する場合は、jsでaタグにして、書き換えるという感じです。 なので、そのフォームに投稿される文字には日本語が含まれるURLもあれば含まれないURLもある可能性があります。
turbgraphics200

2016/12/22 14:46

[\w?=&.\/-;#~%-] のところを [\wぁ-んァ-ン一-龥?=&.\/-;#~%-] のように日本語を含めればいいと思いますが、もちろんこれでも100%マッチするかはわかりません。 パターンを考えると時間がかかるので、いっそのこと [^\s] に置き換えてもいいんじゃないかと思うのですが。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問