26983


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

* * *

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

[code]

    <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>
    
[/code]

* * *

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

[code]

    <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>
    
[/code]

* * *

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

* * *

## 追記

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

[code]

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

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

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


CC BY-SA 3.0
2016-06-23T05:24:55.827
26982
2016-06-24T07:58:05.643
2016-06-24T05:30:56.447
7886
7886
question
javascript php .htaccess
/hoge/…で開始するaタグをクリックしたら、”http://ja.stackoverflow.com/hoge/…へアクセスさせたい


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

[code]

    // 注: jQueryを使った例
    $(function() {
      $('a[href^="/hoge/"]').each(function() {
        $this = $(this);
        $this.attr('href', "http://example.com" + $this.attr('href'));
      });
    });
[/code]

[code]

    <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>
[/code]

  1. href属性が `/hoge/` で始まる a タグを `a[href^="/hoge/"]` で抽出  
（[CSS3のセレクタ](http://www.htmq.com/selector/attrvalueb.shtml)なので
`document.querySelectorAll()` 等でも使えます）

  2. href属性の値を取得し、文字列連結してhrefに設定しなおす  
（DOMのhrefプロパティから取得すると完全なURLになってしまっているので、`attr()` や `getAttribute()`
等を使ってHTMLに書いた通りの相対URLを取得します。設定する時はhrefプロパティでも構いません）

* * *

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

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

[code]

    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');
    }
[/code]

[code]

    <div id="foo"></div>
[/code]

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


CC BY-SA 3.0
2016-06-23T05:52:23.513
26983
2016-06-24T07:58:05.643
2016-06-24T07:58:05.643
8000
8000
26982
answer


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

[code]

    RewriteEngine on
    RewriteBase /
    RewriteRule ^hoge/(.*)$ http://ja.stackoverflow.com/hoge/$1 [R=301,L]
    
[/code]


CC BY-SA 3.0
2016-06-23T06:08:57.640
26989
2016-06-23T06:08:57.640
16923
26982
answer


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

[code]

    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");
    }
    
[/code]


CC BY-SA 3.0
2016-06-23T10:17:51.930
27002
2016-06-23T10:17:51.930
13215
26982
answer