サイト全体の画像やCSSのパスを置換したい

Question

###実現したいこと
画像やCSSのパスを置換したいのですが、なかなかうまくいきません。

「置換前のパス」
www.example.com

・具体例
<img src="http://www.example.com/img/画像.jpg" alt="">

<link rel="stylesheet" href="http://www.example.com/css/スタイルシート.css">

---

「置換後のパス」

test.example.co.jp

・具体例
<img src="http://test.example.co.jp/img/画像.jpg" alt="">

<link rel="stylesheet" href="http://test.example.co.jp/css/スタイルシート.css">

###下記が利用できる環境です。

• .htaccess
• javascript（jQuery）
• php ※WordPressにて作成

---

ネット上の情報などを調べて下記ソース等を試しているのですが、なかなか反映がされません。
特に.htaccessは「Internal Server Error」になってしまいます。

###jQuery

$('body').each(function(){
	var txt= $(this).html();
	$(this).html(txt.replace(/www\.example\.com/g,'test.example.co.jp'));
});

###.htaccess

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.example\.com$ [NC]
RewriteRule .* test.example.co.jp%{REQUEST_URI} [R=301,L]

何か根本的に間違えているのかもしれませんが
何卒お力をお貸しいただけないでしょうか？

###補足
とあるサイトのリニューアル準備をしています。
最終サブドメインで公開をするのですが、画像やCSSはメインドメインを参照するため絶対パスで指定をしています。

あらかじめ本番用のパス（置換前）で記述をしておき、
テストの時点ではテスト用のパス（置換後）のURLを参照させるが目的です。

Answer 1

jQueryでやるのであればこんな感じじゃないでしょうか。 linkタグとimgタグだけを対象にしています。

<script type="text/javascript">
  $(document).ready(function(){
    $('link').each(function() {
      var url = $(this).attr('href');
      if (url) {
        $(this).attr('href', url.replace(/www\.example\.com/, 'test.example.co.jp'));
      }
    });
    $('img').each(function(e) {
      var url = $(this).attr('src');
      if (url) {
        $(this).attr('src', url.replace(/www\.example\.com/, 'test.example.co.jp'));
      }
    });
  });
</script>

また .htaccess で URLを書き換える方法は、基本的に www.example.com の .htaccess に記述して、URLをReWriteするやり方なので、本体サイトの挙動が変わってしまうので、今回の利用ケースにはマッチしないと思います。

もし .htaccess(Apache) だけでやりたいなら、サブドメイン用のサイトのApacheにプラグインを追加して、レスポンスボディを書き換えるなどは可能だと思います。

http://www.psi-net.co.jp/blog/?p=1111

その他の案

• WordpressのPHPが自分でいじれるのであれば、HTMLを吐き出す際に、JSと同様に正規表現でURLを書き換えてしまう。
• Apache(Webサーバ)の前段に別途プロキシサーバをおいて、プロキシサーバで、レスポンスHTMLのURLを書き換える

Comments

[umauman]

ご回答ありがとうございます。
記述いただいたソースで上手くいきました！
とても嬉しいです。

href属性とsrc属性を書き換えるのですね。大変勉強になりました。

1つだけ質問なのですが、
if (url) { }で囲むのはどのような役割があるのでしょうか？
外してしまっても動作をいたします。
ただ、気のせいか画像の読み込みが遅くなるような気もします。
もし差支えなければこちらご教授いただけますととても助かります。
（お時間許せばで大丈夫です）

.htaccessの場合は「www.example.com」側に設置しないといけないのですね。このあたり無知でした。
加えて本ケースに向かないのですね。
（Apacheはハードルが高く…悲）

この度は本当にありがとうございました！

[tell_k]

> if (url) { }で囲むのはどのような役割があるのでしょうか？

これは万が一 linkタグやimgタグに urlの属性(href, src)を書き忘れてしまった場合、url.replaceを呼ぶとエラーになるので、そうならないために、ifでチェックしています。外して遅くなるということはないと思いますが、外したことでエラーになって、処理が中断してしまう可能性はあると思います。

[umauman]

解説ありがとうございます。
記述しておいた方が良さそうですね。
勉強になりました。
何度もすみませんでした。