- 締切済み
@の後ろを自動的にリンクにしたい
javascriptで、「@」の後ろを自動でリンク化したいです。 ある文字列があったとします。 <span class="auto">@ほげほげ</span> これを、自動的に(class=autoがついている範囲の場合は)、 <a href="http://hoge.com/hoge.php?=ほげほげ">@ほげほげ</a> というリンクがつくようにしたいです。 phpに渡すクエリには、@はつけたくないですが、見た目のリンクは@を含めるようにしたいです。 (区切りはスペースまで) ｈttp://～ に関しては以下のページが参考になりました。 http://www.openspc2.org/JavaScript/Ajax/jQuery_plugin/chapter8/index.html 同じようなことを @～ でやりたいという意味になります。 よろしくお願いします。
- cnkozo
- お礼率39% (158/402)
- JavaScript
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
こんな漢字でしょうかね・・・ <!DOCTYPE html> <meta charset="UTF-8"> <title></title> <body> <p> <span>aaa</span> <span class="auto">@bbb</span> <span class="auto">ccc@ddd</span> <span class="test1 auto test1">@eee</span> <span class="auto">fff</span> <span>@ggg</span> </p> <script> var a = document.createElement ('a'); a.appendChild (document.createTextNode ('')); Array.prototype.slice.call (document.getElementsByClassName ('auto'), 0) .forEach ( function (e) { var t = e.textContent; var c = this.cloneNode (true); c.href = (0 === t.indexOf ('@')) ? 'http://hoge.com/hoge.php?name=' + encodeURIComponent (t.substring (1)) : t; c.firstChild.data = t; e.parentNode.replaceChild (c, e); }, a); </script>
- yambejp
- ベストアンサー率51% (3827/7415)
こんなかんじでしょうかねぇ・・・ <script> window.onload=function(){ replace_atmark(); } function replace_atmark(){ var nodes=document.getElementsByTagName("span"); var reg=new RegExp("(^| )auto( |$)","i"); for(var i=0;i<nodes.length;i++){ var n=nodes[i]; var v=n.childNodes[0].nodeValue; if(n.className && n.className.match(reg) && v.indexOf("@")==0 ){ var newNode=document.createElement("a"); newNode.setAttribute("href","ttp://hoge.com/hoge.php?="+v.substr(1)); newNode.appendChild(document.createTextNode(v)); n.parentNode.insertBefore(newNode,n); n.parentNode.removeChild(n); } } } </script> <p> <span>aaa</span> <span class="auto">@bbb</span> <span class="auto">ccc@ddd</span> <span class="test1 auto test1">@eee</span> <span class="auto">fff</span> <span>@ggg</span> </p>
- fujillin
- ベストアンサー率61% (1594/2576)
参照サイトはjQueryを利用して解説しているようなので、jQueryを利用しています。 （全角空白は半角に） $(function(){ var baseURL = "http://hoge.com/hoge.php?="; $("span.auto").each(function(){ $("<a></a>").html(this.innerHTML) .attr("href", baseURL + encodeURIComponent(this.innerHTML.replace(/^\@/, ""))) .replaceAll(this); }); });
補足
ありがとうございます。 大変申し訳ございません、 参考サイト： http://www.openspc2.org/JavaScript/Ajax/jQuery_plugin/chapter8/index.html と同じく、 ｈttp://～ の場合は、通常のリンク、 @ほげほげ の場合は、 ｈttp://hoge.com/hoge.php?name=ほげほげ へのリンク、ということにしたいのですが、どうしたらよいでしょうか。 つまり、ｈttp://～と@～の場合でリンクを変えたいです。 よろしくお願いいたします。
- yambejp
- ベストアンサー率51% (3827/7415)
仮に「ほげほげ」のようなマルチバイト文字の場合、エンコードしないと 不正なリンクになりますがよろしいのでしょうか？ またクラスautoのspanの中に別のタグがないことは保証されているのでしょうか？
補足
encodeURI() でエンコードしたいと思いますが。 クラスautoのspanの中に別のタグはありません。 よろしくお願いします。
関連するQ&A
- 押下したリンクの表示を変えたい。
うまく説明できないので、添付の画像を見ていただけると助かります。 たとえば、項目1、項目2、項目3というリンクがあって、項目1をクリックしたら JavaScriptを走らせたいのですが、その際、項目1は非リンク状態（再度押せない 状態）にしたいのです。他の項目をクリックしたら、今度はその項目が非リンクになり、 今まで非リンクだったところ（この場合は項目1）は再びリンク可に戻ります。 また、もし可能なら、ソース的には、 <span class="nonlink">項目1</span><a href=… onclick…>項目2</a><a href=… onclick…>項目2</a> のように、非リンクの場所はSPANをあてたい（スタイルシートをあてたいため）のですが、 可能でしょうか。
- ベストアンサー
- HTML
- javascript リンク先の変更
遅くに失礼致します。 Javascriptで可能かどうかは分からないのですが リンク先を変更する手段を探しています。 現在ホームページを組んでおり、jQueryのスクリプトお導入した所、 リンク先に数値が指定してありその数値を変更したいのですが 変更するとjQueryが動作しなくなり困っております。 html側のソースは <a href="a?x=344&y=-53" class="a_a"><img src="#"></a> <a href="b?x=-50&y=0" class="a_b"><img src="#"></a> 等となっており、 画像をクリックしたら一度 a?x=344&y=-53.html に移動してから自動で別ページへ誘導する事を 考えてみたのですがその様なファイルが作れるはずもなく行き先を失いました。 クリックしてリンクが a?x=344&y=-53 なら ****.html に誘導等といった事はjavascriptで可能なのでしょうか？ また、対策として何か方法があるようでしたらご教授頂ければ幸いです。 何卒、宜しくお願い致します。
- ベストアンサー
- JavaScript
- JavaScriptを直接呼んでリンク
Linux+Apacheで開発しております。 javascriptを直接呼んで任意のリンクへ移動したい のですが、現在ですとダイアログが表示されて ダウンロードしますか？と聞かれます。 そうじゃなくってhoge.jsに書いたリンク先へ 移動したいのです。 ご存知の方がいらっしゃいましたらご教授下さい。 よろしくお願いいたします。 <a href="http://hoge.co.jp/hoge.js">ホゲリンク</a><br> --------- hoge.js -------- document.write("<iframe width='300' height='300' src='http://hoge.co.jp/hoge.php' NAME='iframeName'></iframe>");
- ベストアンサー
- JavaScript
- jqueryとjavascriptの競合？
どなたかお知恵をお貸しくださいませ。 jqueryとjavascriptを混在させたページを作っています。 ファイルは全て同一サーバー内です。 ◆希望ページ構成 <body> <div class="wrap"> <div class="header"></div> <div class="main">**フロートで左に配置 <iframe></iframe> </div> //１． //jqueryの「iframe-auto-height」プラグインを使って、 //読み込まれた内容に応じてiframeの高さを変えるようにしたい。 <div class="menu">**フロートで右に配置</div> //２． //jqueryの「portamento」プラグインを使って、 //画面が縦長になりスクロールしてもこの「メニュー」が //画面に追従してフロートするように（常に画面上に現れている様に）したい。 //３． //このメニュー内のリンクから「iframe」内の内容を切り替えたい。 </div> </body> ■ 「１．」「２．」のjqueryは、同時にちゃんと動作しました。 が、「３．」を加えると「１．」が動きません。 「２．」は常に正常に動作します。 「１．」と「３．」が競合しているようなのですが、 私はみなさんが提供してくださっているスクリプトを“切り貼り”して 使わせて頂いている程度の知識しかなく、この問題をどうすれば回避し、 希望のページを作れるのか分からず、どなたかお詳しい方にご教示頂ければ、と思った次第です。 ★「３．フロートするメニューボックスの中のリンクから、 表示する内容に応じて高さが可変するiframeの内容を切り替える」 にはどのようにすればよいでしょうか？ ◆HTML記述 <head> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript" src="jquery.iframe-auto-height.plugin.1.5.0.min.js"></script> /// １．「iframe-auto-height」用。これは<head>内だけでなく、</body>の前部分に置いても動作しました。 <script type="text/javascript"> <!-- function ifr(jpURL){ panel.location = jpURL; } // --> </script> ///３．「リンクでiframe内を切り替える」用。 </head> <body> ～ ～ <iframe src=".html" name="panel" width="620" height="1500" class="auto-height" scrolling="no" frameborder="0"></iframe> /// 『切り替え』用に「name」を付け、『autoheight』用に「class」を付けています。 /// フロートの確認用に便宜的に「height」を書いていますが、『autoheight』が動作する際 /// は「height」は無視されています。 <script type="text/javascript"> jQuery('iframe').iframeAutoHeight(); </script> /// 『autoheight』用スクリプト ～ ～ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="http://portamento.js"></script> <script> $('#menu').portamento({gap: 100}); // set a 100px gap rather than the default 10px </script> /// 『フロートボックス』用読み込み＆スクリプト </body> 内容は以上となります。 何卒よろしくお願いいたします。
- 締切済み
- JavaScript
- リンク前後で画像を変えたい
こんにちわ。 少し質問させていただきます。 タイトルそのままですが、 リンク前とリンク後で画像を変えたいのですが、 どうすればよろしいでしょうか？ 以前にこちらでロールオーバーの質問をした時に a1_off.pngをa1_on.pngに名前で変えるやり方を教えて 頂きました。（質問自体は少し違いますが・・・） 切り替える画像の種類が多いので同様にリンク後に a1_linkbefore.pngからa1_linkafter.png a2_linkbefore.pngからa2_linkafter.png のように名前で変えたいと考えたいのですが そのような事ができるのでしょうか？ できるのであれば、ご教授お願いしたいです。 ちなみにソースはこのような形です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <html lang="ja"> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript"> $().ready ( function() { $('a.link').each ( function() { var imgObj = $(this).find('img'); var imgSrc = imgObj.attr('src'); $(this).mouseover ( function() { imgObj.attr ( 'src', imgSrc.replace ( /off.png/, 'on.png' ) ); }).mouseout ( function() { imgObj.attr ( 'src', imgSrc ); }) }); }); </script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p class="クラス１"> <a href="a1.html" class="クラスA-1"> <span class="クラスＡ-1">A1</span> <img src="a1.png" border="0"> </a></p> <p class="クラス2"> <a href="a2.html" class="クラスＡ-2"> <span class="クラスＡ-2">A2</span> <img src="a2.png" border="0"> </a></p> </body> </html> よろしくお願いします。
- ベストアンサー
- JavaScript
- JQueryのセレクタ
jqueryでセレクタの取得をしたいのですがうまくいきません div要素の中のspan要素を取得したいのですがclassで取得すると重いのでid属性で場所を限定してからclass属性で絞り込みたいです こんな感じにしたらだめでした $("#hoge.foo").html('ほげ'); html <div id=hoge> <span class=foo></span> </div>
- ベストアンサー
- JavaScript
- jQuery・Ajaxについて教えて下さい。
jQueryを使用した「Tipped」というツールチップ作成フレームワークを使用しています。 「ツールチップの上にさらにツールチップを表示する」ということが出来ず困っております。 ドキュメント http://projects.nickstakenburg.com/tipped/documentation 特定のクラス名の文字にカーソルを当てると、Ajaxにより外部HTML(PHP)の内容が小窓で表示されるというものです。 これを使って外部HTMLの表示をすることはできたのですが、 ツールチップ内に表示されるHTMLの中にさらに同名のクラス名を埋め込み、 そこにカーソルを当てたとき二重（入れ子）でツールチップを表示するということをしたいのですが、 最初の１つしか表示されません。 ■読み込む側(A.php) ～ 必要なファイルの読み込み ～ <span class='tipped' data-tipped='B.php'>カーソルを当てると「B.php」の内容を表示</span> <script type="text/javascript"> jQuery(document).ready(function() { Tipped.create(".tipped", { ajax: true }); }); </script> ～ ■読み込まれる側（B.php) <span class='tipped' data-tipped='C.php'>ここにカーソルを当てて「C.php」の内容を表示させたい</span> A.phpからB.phpのツールチップを表示することはできました。 B.phpからC.phpのツールチップを表示することもできますが、 A.phpに表示したB.phpからはC.phpのツールチップが表示できません。 Ajaxを使わず、B.phpに静的なツールチップを埋め込んだ場合も表示できませんでした。 wordpressの記事ページで動作させています。 必要なjsファイルは読み込んでおり、ファイルはそれぞれ同じ階層にあります。 何が問題で表示できないのでしょうか。どうかご教示をお願いします。
- ベストアンサー
- JavaScript
- 途中経過を表示させる方法は？
JavaScript(jQuery) から $.ajax() で php の実行結果を受け取る作業をしています。 var msgObj = $("#result"); msgObj.text('処理中 ...'); setTimeout(function(){ $.ajax({ url: "hoge.php",type:"POST", async:true, cache:false, success: function(e){ msgObj.text(e); } }); }, 10); [hoge.php] （処理１） echo "処理１完了"; （処理２） echo "処理２完了"; ： hoge.php の処理が時間かかることを想定して、途中経過を表示させたいのですが、どのようにすればよいのでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQuery「jplayer」プレイリスト自動再生
音楽再生用jQueryプラグイン「jplayer」でMP3を再生させるプレイリスト表示にて 自動再生させたいのですが、うまくできません。 同プラグインの1曲だけ再生するプレイヤーでは自動再生が可能なのですが、 こちらのプレイリストの場合、どこで$("#jquery_jplayer_1").jPlayer("play"); または.jPlayer("jp-play"); を指定したらいいのかがわかりません。 公式サイトでのデモも自動再生はしておらず、 ドキュメントもひと通り読みましたが、よくわかりませんでした。 Javascript(jQuery)については、コピー・ペーストでの設置と、 ある程度のカスタマイズが頑張れば出来る程度の初心者なため、 どうしたらいいのか困っています。 どうぞよろしくお願い致します。 自動再生させたいプレーヤーのデモはこちらです http://jplayer.org/latest/demo-02/ 現在のソースはこの通りです（ボタンをクリックしての再生は可能） <script type="text/javascript"> $(document).ready(function(){ new jPlayerPlaylist({ jPlayer: "#jquery_jplayer_1", cssSelectorAncestor: "#jp_container_1" }, [ //ここから音源指定 { title:"曲名", mp3:"01.mp3", oga:"01.ogg" }, //上記を曲数分繰り返す ],{ swfPath: "js", supplied: "oga, mp3", wmode: "window", smoothPlayBar: true, keyEnabled: true, }); }); </script> <div id="jquery_jplayer_1" class="jp-jplayer"></div> <div id="jp_container_1" class="jp-audio"> <div class="jp-type-playlist"> <div class="jp-gui jp-interface"> <ul class="jp-controls"> <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li> <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li> <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li> <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li> <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li> <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li> <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li> <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li> </ul> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> <div class="jp-current-time"></div> <div class="jp-duration"></div> <ul class="jp-toggles"> <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li> <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li> <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li> <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li> </ul> </div> <div class="jp-playlist"> <ul> <li></li> </ul> </div> <div class="jp-no-solution"> <span>Update Required</span> To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. </div> </div> </div>
- ベストアンサー
- JavaScript
- ｐｈｐでのリンク
PHP初心者なのですが、教えて下さいｍ(__)ｍ プルダウンでの選択史を選ぶと次にまた選択史を表示させたいのですが、PHPを勉強したばかりなのでスマートにソースを書くことができません。 ↓のような感じで一応できたのですが、これはおかしいと言われました。 PHPなのになぜ、リンクのところだけがHTMLになっているの？と。 言われてみればそうなのですが、これ以外よく分からなくて…。 色々調べたのですが、上手くいきませんでした。 <A href="data/hoge.php"><? echo ($hoge_data[0]); ?></A><BR> <A href="data/hoge_1.php"><? echo ($hoge_data[1]); ?></A><BR> ： ： ： このおかげで<hoge.php>、<hoge_1.php>…といっぱい必要になってきてしまい…。 何かスマートな方法はありますでしょうか？ 宜しくお願い致しますm(__)m
- ベストアンサー
- PHP
補足
ありがとうございます。 仰る方法で実現できました。 ただ、大変申し訳ございません、 参考サイト： http://www.openspc2.org/JavaScript/Ajax/jQuery_plugin/chapter8/index.html と同じく、 ｈttp://～ の場合は、通常のリンク、 @ほげほげ の場合は、 ｈttp://hoge.com/hoge.php?name=ほげほげ へのリンク、ということにしたいのですが、どうしたらよいでしょうか。 つまり、ｈttp://～と@～の場合でリンクを変えたいです。そこがうまくできませんでした。 よろしくお願いいたします。