0

質問
・特定のパスで始まるリンクがあった場合、リンクコード(HTML)部分を書き換えることなく、「
特定のホスト名」を付与してリンクさせたい


http://hoge.hoge.co.jp/”内のページで、下記のようなaタグがある時、
開始条件
・/hoge/

<a href="/hoge/">1</a>
<a href="/hoge/a">2</a>
<a href="/hoge/b/">3</a>
<a href="/hoge/c/d/index2.html">4</a>

ユーザがリンクをクリックしたら、下記のようにアクセスさせたいのですが、どうすれば良いでしょうか?
付与したい内容
・"http://ja.stackoverflow.com"

<a href="http://ja.stackoverflow.com/hoge/">1</a>
<a href="http://ja.stackoverflow.com/hoge/a">2</a>
<a href="http://ja.stackoverflow.com/hoge/b/">3</a>
<a href="http://ja.stackoverflow.com/hoge/c/d/index2.html">4</a>

補足
・/hoge/以外で開始するリンクは、従来どおり”http://hoge.hoge.co.jp/”内のページへアクセスさせたい、です


追記

回答内容を試したのですがうまくいかなかったため、(関係ないと思い記載していなかった)前提条件を追加します
・リンクコード(HTML)部分はJSONPで動的に取得しています
・具体的には、#hogeへinnerHTMLで追加しています

<script>
  var listener = function(ev){
  //ここに回答いただいた内容を追記すれば動作すると思ったのですが
  document.body.addEventListener('click', listener, false);
</script>

・innerHTMLで追加したDOMをさらに操作するためには何か特別な処理が必要でしょうか?

・例えばですが、リンククリックした時点ではなく、innerHTMLで追加する前に処理することは可能でしょうか?
・DOM内容(のリンクテキスト部分)を、一括置換することは可能?
・どこにも所属していないDOM内容を変更することは出来ない?

3 件の回答 3

3

HTMLを書き換えたくないだけで、DOMはいじっていいのならこんな感じでしょうか。

// 注: jQueryを使った例
$(function() {
  $('a[href^="/hoge/"]').each(function() {
    $this = $(this);
    $this.attr('href', "http://example.com" + $this.attr('href'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://google.com/">http://google.com/</a><br/>
<a href="/">/</a><br/>
<a href="/piyo">/piyo</a><br/>
<a href="/hoge/a">/hoge/a</a><br/>
<a href="/hoge/b/">/hoge/b/</a><br/>
<a href="/hoge/c/d/index2.html">/hoge/c/d/index2.html</a>

  1. href属性が /hoge/ で始まる a タグを a[href^="/hoge/"] で抽出
    CSS3のセレクタなので document.querySelectorAll() 等でも使えます)
  2. href属性の値を取得し、文字列連結してhrefに設定しなおす
    (DOMのhrefプロパティから取得すると完全なURLになってしまっているので、attr()getAttribute() 等を使ってHTMLに書いた通りの相対URLを取得します。設定する時はhrefプロパティでも構いません)

ページ読み込み時ではなく任意のタイミングで処理したいのであれば、ページ読み込み後に実行させるための $(function...); は不要です。また特定の要素のみを対象にしたいのであれば、ページ全体から要素を探す $('...') の代わりに $(...).find(...) という形をとるとよいでしょう。

というか、よく見たらjQueryを使っているとはどこにも書かれていませんね、失礼しました。上記も踏まえ、jQueryなしで書き直すとこんな感じでしょうか。

var html = '<a href="/piyo">/piyo</a><br/><a href="/hoge/a">/hoge/a</a><br/><a href="/hoge/b/">/hoge/b/</a><br/><a href="/hoge/c/d/index2.html">/hoge/c/d/index2.html</a>';
var target = document.getElementById('foo');

target.innerHTML = html;

var links = target.querySelectorAll('a[href^="/hoge/"]');
for (var i = 0; i < links.length; ++i) { // ES2015の for..of でも構いません
  links[i].href = 'http://example.com' + links[i].getAttribute('href');
}
<div id="foo"></div>

文字列の段階で href="/hoge/ を置き換えるという手もありますが、そのような文字列がタグ以外の部分に登場すると誤検知するので注意が必要です。

2
  • (関係ないと思っていた)前提条件を追加しました
    – re9
    Commented 2016年6月24日 5:32
  • 100%期待通り動作しました!
    – re9
    Commented 2016年6月25日 13:22
0

こういうのでいいのでは無いですか?

var aTags = document.getElementsByTagName("a");
for(var i=0,len=aTags.length; i<len; i++){
  if(!aTags.href) continue;
  aTags.href = aTags.href.replace("/hoge/", "http://ja.stackoverflow.com");
}
1
  • (関係ないと思っていた)前提条件を追加しました
    – re9
    Commented 2016年6月24日 5:32
-1

.htaccessなら以下のような感じでリダイレクトはいかがでしょう。

RewriteEngine on
RewriteBase /
RewriteRule ^hoge/(.*)$ http://ja.stackoverflow.com/hoge/$1 [R=301,L]
1
  • 試してみたのですが、期待した通り動作しませんでした
    – re9
    Commented 2016年6月24日 5:32

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。