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

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

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

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

Q&A

1回答

1123閲覧

jsで改行を含ませずURLリンクを有効にしたい

onigiri_mogu

総合スコア15

JavaScript

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

0グッド

1クリップ

投稿2019/06/24 04:43

編集2022/01/12 10:55

javascript初心者です。

jsでHTML内に、
テキストで書かれた文字のうち、URLの部分をリンク付けをしたいです。

ただ、日本語のURLにも対応したいので、
一度エンコーディングしてから正規表現の文字列をURLにして、
デコーディングしています。

その際、
テキスト内に改行があると、改行(<br>)部分もURLの一部分として認識されてしまいます。

どのようにすれば、http/https以降の文字を
改行を含ませずに
リンクにすることができるでしょうか?

考えている流れとしては、
①HTML内でテキスト表示する内容部分をタグで定義する。
②URLの正規表現を定義
(正規表現は次のものにしています)

js

1var exp = /(https?://[\w/:%#?()~.=+\-]+)/ig;

③jsにてタグのinnerHTMLを内容を取得
④ ③の内容をエンコーディング
⑤ replace関数を使って、④のうちURL部分を有効にする

js

1 replace(exp,"<a href='$1'>$1</a>");

⑥ ⑤をデコーディングする。
⑦ 取得したタグのinnnerHTMLに⑥を返す

■起こっていること
以下のようにテキストに値が入っていると

HTML

1URL(←文字列)<br> 2http://www.XXX/XXX<br> 3<br> 4文字列です

以下の様なURLが<a>タグに入っています。

HTML

1URL(←文字列) 2<a href=http://www.XXX/XXX<br><br>文字列です>http://www.XXX/XXX</a> 3 4文字列です

■HTMLで表示させたいことは以下の様にしたいです。

HTML

1URL(←文字列) 2<a href=http://www.XXX/XXX>http://www.XXX/XXX</a> 3 4文字列です

至らぬところありましたら、すみませんがご指摘お願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

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

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

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

m.ts10806

2019/06/24 04:48

改行コード→<br>にしている処理もご提示ください。
onigiri_mogu

2019/06/24 05:21

不備がありましたので、更新しました。 "■起こっていること"のうち "以下のようにテキストに値が入っていると"の内容には もともと<br>が含まれているので、この旨を追記しました。
guest

回答1

0

html

1<div id="content"> 2 URL(←文字列)<br> 3 http://www.XXX/XXX<br> 4 <br> 5 文字列です 6</div> 7<script> 8var exp = /(https?://[-_.!~*\'()a-zA-Z0-9;/?:\@&=+$,%#]+)/ig; 9var content = document.getElementById('content'); 10content.innerHTML = content.innerHTML.replace(exp, '<a href="$1">$1</a>'); 11</script>

投稿2019/06/24 12:09

yasutomi

総合スコア2937

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

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

onigiri_mogu

2019/06/26 05:04

返信が遅れてしまい、すみません。 ご教授いただき、ありがとうございます。 ご回答いただいた上記コードで試してみましたが、 日本語を含むURLでは、リンク化することができませんでした。(例:https://日本語.jp/case/) また、エンコードした後に行い、デコーディングを行ってみると URL以外の文字もURLとして認識されてしまいました。 どこまでの文字(日本語、英文字、記号)をURLとして認識するかを定め、その範囲内を正規表現で定義するのが良いでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問