JSで文字列中のURLをリンクに変換する方法

このQ&Aのポイント
  • PHPだとURLをリンクに変換するのは簡単ですが、JSではどうすればいいのでしょうか?この記事では、文字列中のURLをリンクに変換する方法について解説します。
  • JSで文字列中のURLをリンクに変換する方法について解説します。URLを正規表現で検索し、リンクタグで囲むことで実現します。具体的なコードとサンプルを紹介します。
  • JSで文字列中のURLをリンクに変換する方法をご紹介します。URLを正規表現で検索し、リンクに変換するための関数を使います。コードの解説とサンプルを提供します。
回答を見る
  • ベストアンサー

文字列中にURLを見つけたら、リンクとして出力したい

お疲れ様です。 いつもお世話になっております。 私はPHP書きなので、PHPではすぐかけるのですが、今回はJSに埋め込まなければならないため、頭を抱えています。 PHPだとこういうことです---------------------------- preg_match_all('/(http(s?):\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)/', $text, $delimiter); array_pop($delimiter); for( $i = 0;$i < count($delimiter[0]);$i++){ $text = str_replace($delimiter[0][$i], "<a href='{$delimiter[0][$i]}'>{$delimiter[0][$i]}</a>", $text); } --------------------------------------------ここまで たとえば var str = "今日は晴れだった。天気予報はhttp://www.jma.go.jp/jma/index.htmlで見られる。"; という文字列があった場合、 var str = "今日は晴れだった。天気予報は<a href="http://www.jma.go.jp/jma/index.html">http://www.jma.go.jp/jma/index.html</a>で見られる。"; と置換したいのです。(タグ回避のため<>は全角です) サンプルのURLは気象庁のページです。 str.match();で、一致させることはできるのですが、それをどうやって、タグでくるめばよいのかが分かりません。 解説しているサイトか、スクリプトを載せていただけると助かります。 よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

str = str.replace(/(http(s?):\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)/i,'<a href="$1">$1</a>'); でいいのか?

nyalio
質問者

お礼

それでいいです。

関連するQ&A

  • 正規表現で文字列の抜き出し

    PHP4で、文字列の中からマッチしたものを抜き出したいのですが、なかなか上手いこといきません。 $str = "<a href=http://www.abc.com/><b>ABC</b>company</a>"; preg_match("/<a href=(.*)>(.*)<\/a>/i",$str,$str_reg); http://www.abc.com/ と <b>ABC</b>company の2つを抜き出したいのですが、 <b>タグが邪魔をして抜き出せません。 どうすれば上記2つを抜き出せるのでしょうか?

    • ベストアンサー
    • PHP
  • HTML内のリンクURLとリンク文字の取得について

    色々調べてある程度は出来たのですが、本当に欲しいとしている事が出来ない為質問させて頂きます。 PHPにおいてあるURLを指定して <a href="http://test.net/">1</a><BR> <a href="http://test.net/index.html">2</a><HR> <a href="http://test.net/index.php">3</a><BR> あああ<BR> <a href="./test.html">5</a> 等と入っている場合に http://test.net/,1, http://test.net/index.html,2, http://test.net/index.php,3, ./test.html,5, の様に変換したいのです いいやり方がありましたらご教授お願い致します。

    • ベストアンサー
    • PHP
  • デフォルトのURLを決めてリンクに貼り付けたい

    phpの例えばconfig.phpなどでデフォルトのURLを決めて、index.phpなどのアンカータグに貼り付けて、デフォルトのURLから文字列がはじまるようにしたいのですが、どうすればできますか? こんな感じを想定しています。 config.php デフォルトのURL (http://www.yahoo.co.jp/) index.php <a href="<実行タグ>/html/index.php> 本当は、自動で絶対パスを取得してURLに変換し、上記の実行タグで行いたかったのですが、僕にはまだスキルが高すぎて、応用ができませんでしたので、上記の方法を探していますが、基本的すぎるのか見つかりません。どなたかご教示頂けないでしょうか。 お願い致します。

    • ベストアンサー
    • PHP
  • PHPの文字列をJavascriptの変数にする

    PHPの変数に格納された文字列を、直接Javascriptの変数の一部として格納しようと考えています。 例:) <script> var txt = "<?php echo $text; ?>"; </script> しかし、$textにダブルクォーテーションなどの文字が含まれていると、スクリプト全体が破綻します。今のところ、PHPの中で、問題を起こしそうな文字列を変換するように処理しています。 例:) $text = str_replace("\\", "\\\\", $text); $text = str_replace("\"", "\\\"", $text); $text = str_replace("\n", "\\n", $text); これよりもスマートな方法(たとえば用意されている関数を使うなど)がありますでしょうか。

    • ベストアンサー
    • PHP
  • 正規表現 URLのリンク

    $value = 'http://www.google.co.jp http://www.google.co.jp'; $screen = substr($value, 0, 40); $strVal = preg_replace("/http.?:\/\/([0-9a-zA-Z\-\.!~\/?:;=+,%#_])+/","<a href=\"\\0\" target=\"_blank\">\\0</a>", $screen); echo $strVal; とした場合 <a href='http://www.google.co.jp'>http://www.google.co.jp</a> <a href='http://www.googl'>http://www.googl</a> となってしまうのですが、これを2つ目は切れているので、末尾でヒットした場合にはAタグは付けないようにしたいのですが、できますでしょうか?

    • 締切済み
    • PHP
  • URLを見つけたら自動でリンク、タイトルを取得する

    よろしくお願い致します。 ------------- 引用元:http://aaa、http://bbb、http://ccc ------------- という文字列がある場合 ------------- 引用元:<a href="http://aaa" target="_blank">タイトルaaa</a>、<a href="http://bbb" target="_blank">タイトルbbb</a>、<a href="http://ccc" target="_blank">タイトルccc</a> ------------- に置き換える方法を考えています。 ------------- <?php // 対象文字列 $text = '引用元:http://aaa、http://bbb、http://ccc'; // パターン $pattern = '/((?:https?|ftp):\/\/[-_.!~*\'()a-zA-Z0-9;\/?:@&=+$,%#]+)/u'; // 置換後の文字列 $replacement = '<a href="\1">\1</a>'; // 置換 $text= preg_replace($pattern,$replacement,$text); // 出力 echo $text; ?> ------------- で ------------- 引用元:<a href="http://aaa" target="_blank">http://aaa</a>、<a href="http://bbb" target="_blank">http://bbb</a>、<a href="http://ccc" target="_blank">http://ccc</a> ------------- までは行けたのですが、タイトルを取得する方法が分かりません。 http://otapps.net/archives/305 こちらを参考に考えたのですが、先に進めずにいます。 分かる方がいらっしゃいましたら、ご教示ください。 よろしくお願い致します。

    • ベストアンサー
    • PHP
  • 定義済み関数

    すみません。以下のコードで、 フォームから入力された # で区切られた文字列 例えば、 #焼肉#すき焼き#しゃぶしゃぶ を、#で分け表示しています。 以下のコードでは成功しいていますが、長いので定義済み関数とfor文で同じことをしたいです。(厳密には出力結果が少し違いますが・・・) よろしくお願いします。 現在のコード $tag=explode("#",$row[2],6); $files=str_replace("タグ1",$tag[1],$files); $files=str_replace("タグ2",$tag[2],$files); $files=str_replace("タグ3",$tag[3],$files); $files=str_replace("タグ4",$tag[4],$files); $files=str_replace("タグ5",$tag[5],$files); $files=str_replace("タグ",'<ul>'.'<li>'.'<a href="../article.php?tag='.$tag[1].'">'.$tag[1].'</a>'.'</li>'. ' <li> '.'<a href="../article.php?tag='.$tag[2].'">'.$tag[2].'</a>'.'</li>'. ' <li> '.'<a href="../article.php?tag='.$tag[3].'">'.$tag[3].'</a>'.'</li>'. ' <li> '.'<a href="../article.php?tag='.$tag[4].'">'.$tag[4].'</a>'.'</li>'. ' <li> '.'<a href="../article.php?tag='.$tag[5].'">'.$tag[5].'</a>'.'</li>'.'</ul>',$files); 作りたいコード function tag() { $tag=explode("#",$row[2],6); for( $i=0; $i<count($tag); $i++ ){ echo '<li>'.'<a href="'.$tag[$i].'">'.$tag[$i].'</a>'.'</li>'.;//タグが何個あるかわからないため結合演算子で終わりたいが、 syntax error, unexpected ';' in のエラーが出てしまう。 }} $files=str_replace("ページのお題",'<ul>'.'<li>'.'<img src="../'.$row[1].'">'.'</a>'.'</li>'. '<div class="article-tag">'. ' <li> '.tag()'</li>'.'</div>'.'</li>'. '<li>'.$row[3].'</li>'.'</ul>',$files);//上記の .(定義済み関数での結合演算子を省くと syntax error, unexpected ''</li>'' (T_CONSTANT_ENCAPSED_STRING) in のエラーが出てしまう。)

    • ベストアンサー
    • PHP
  • なぜ週間天気予報は雨マークなしでの予報スタートが多

    なぜ週間天気予報は雨マークなしでの予報スタートが多いのですか。 降水量が1mm以上の雨だった日も最初から雨マークの予報でスタートしてこなかった日が多いです。 これなら外れてもいい雨マークの予報スタートを増やせばいいのになぜそうしないのでしょうか。 逆に、冬も降水量1mm以上の雪の日が太平洋側でさえあるのに、太平洋側の雪の予報スタートはほとんどないです。 なぜ週間天気予報は降水を考慮しないのですか。 http://www.jma.go.jp/jma/kishou/jma-magazine/1306/index.html#a  「1週間前に見た週間予報では傘マークがついてなかったのに、なぜ雨が降っているの!!」 「気になる日が近づいてから「雨が降る」という予報に変えることもあります。」 ↑気象庁のこのページでも降水は考慮していないようなことが書かれています。近づいてから雨の予報に変えるくらいならなぜ始めから雨の予報ばっかりにしないのでしょうか。 週間天気予報では何か天気マークを入れなければならないわけですが、それがなぜ曇、曇時々晴、晴時々曇の予報スタートが前提になるのですか。なぜ外れてもいい雨マークばかりでの予報スタートが前提にならないのでしょうか。雨がその日の卓越天気でなくても、降水量が実際に1mm以上になった日は雨マーク予報スタートでなければならなかったことになります。 仙台で7月中に降水量1mm以上の日は15日間でそのうち週間天気予報で雨マークで予報スタートした日は4日分しかありませんでした。残りの11日分は曇や曇時々晴の予報スタートでした。

  • FC2ブログ タグのリンクについて

    FC2ブログでタグをリスト化しましたが右横に数字は出ているものの リンクはされずに文字化けしたページが出るのみです。 いろいろ調べましたがエンコードがうまくいってないのか他が違うのかが わかりません。 下記のテンプレートの修正以外にも良い方法があれば教えて下さい。 よろしくお願いします。 下記のテンプレートを使っています。 <ul id="【名前】"> <li><a href="【ブログのURL】?tag=【URLエンコードしたタグ1】">【タグ1】</a></li> <li><a href="【ブログのURL】?tag=【URLエンコードしたタグ2】">【タグ2】</a></li> </ul> <script type="text/javascript"><!-- function adCount(ID) { var A=document.getElementById(ID).getElementsByTagName("A"); var T=new Array(); var C=new Array(); var k=0; <!--ctag-->T[k]="<%ctag_name>";C[k]="<%ctag_count>";k++;<!--/ctag--> for(i=0;i<A.length;i++){ for(j=0;j<k;j++){ if(T[j]==A[i].innerHTML){ A[i].innerHTML+=(' ('+C[j]+')');break; } } } } adCount("【名前】"); //--></script>

  • 文字列の置き換え

    はじめまして。正規表現とPHPで下記のような置き換えをしたいのですが、 どうしたら良いのでしょうか。 <a href="http://www.homepage.com/index.php?no=***">***</a> ↓置き換え <a href="javascript:Open('http://www.homepage.com/index.php?no=***')">***</a> ※***、***は毎回違うものが入りますが、その他の部分は全く同じです。 ※***は、半角英数字・「-」で構成されています。 文字数は色々です。 ※***は、かな・漢字などさまざまで、文字数も決まっていません。 よろしくお願い致します。

    • ベストアンサー
    • PHP

専門家に質問してみよう