Q&A
どういうパスがあり得るのか？単に一番下の階層を落とせば良いのか？何かtestという文字列で判断しないといけないのかなどが分かるように書いてください。
お世話になっております。
現在環境が3つあるのですが、各環境のルートパスを取得したいです。
開発環境1が https://test.jp/test/index.html
開発環境2が https://test.jp/test2/index.html
客用環境が https://kokyaku.net/index.html
階層が複数あるため、以下の方法ですと2階層目以下がカレントディレクトリの取得になってしまいます。
js
1var $dir = location.href.split("/"); 2var $dir2 = $dir[$dir.length -2];
やりたいことは、ルートパス+colorとして、色違いの色のページを見せたいです。
https://test.jp/test/index.htmlなら
https://test.jp/test/color/index.html
https://kokyaku.net/path2/path2.htmlのならば
https://kokyaku.net/color/path2/path2.html
という感じです。
現在は以下の形で運用していますが、3環境で動かしたいとのことです。
js
1var page_path = location.href; 2const replaced = page_path.replace('test/', 'test/color/');
ご教示いただければ幸いです。
回答3件
0
補足の内容はよく分かりませんが、
https://test.jp/test/ https://test.jp/test2/ https://kokyaku.net/ を列挙して残せば良いのでは？
JavaScript
1const page_path = location.href; 2const reg = new RegExp("(https://test.jp/test/|https://test.jp/test2/|https://kokyaku.net/).*"); 3const replaced = page_path.replace(reg,"$1");
投稿2020/09/23 13:19
総合スコア85901
0
ルート以下のディレクトリは「abc」「def」の二つで、color以下にも「abc」「def」があります。
この abc と def は各サイト共通で、必ずこの二つなんですよね？
つまり、こういう話ではないですか？
https://test.jp/test/abc/ → https://test.jp/test/color/abc/
https://test.jp/test/def/ → https://test.jp/test/color/def/
https://test.jp/test2/abc/ → https://test.jp/test2/color/abc/
https://test.jp/test2/def/ → https://test.jp/test2/color/def/
https://kokyaku.net/abc/ → https://kokyaku.net/color/abc/
https://kokyaku.net/def/ → https://kokyaku.net/color/def/
ならば、ルートを見つけるのではなく、/abc/ と /def/ を /color/abc/ と /color/def/ に変換すれば良いと思います。
ただし、これが単なるリンクならそのように置換すれば終わりですが、location.href ということは、実際にそこにアクセスした場合に置換ということですね？
その場合、置換後の https://test.jp/test/color/abc/ を更に置換して https://test.jp/test/color/color/abc/ にしてしまう可能性があるので、そのようなことの無いよう、/color/ がある場合を除かなければなりません。
これは次のような正規表現で置換できます。
url.href.replace(/(.*)(?<!/color)(/(abc|def)(/.*|$))/, "$1/color$2")
次のコードでテストケースを増やして確かめてください。
JavaScript
1const testStrings = [ 2 "https://test.jp/test/abc", 3 "https://test.jp/test/color/abc/", 4 "https://test.jp/test/def/", 5 "https://test.jp/test/color/def/", 6 "https://test.jp/test2/abc/", 7 "https://test.jp/test2/color/abc/", 8 "https://test.jp/test2/def/", 9 "https://test.jp/test2/color/def/", 10 "https://kokyaku.net/abc/", 11 "https://kokyaku.net/color/abc/", 12 "https://kokyaku.net/def/", 13 "https://kokyaku.net/color/def/", 14 15 "https://kokyaku.net/abc/abc", 16 "https://kokyaku.net/def/abc", 17 "https://kokyaku.net/abc.def/", 18] 19for (const url of testStrings) { 20 console.log(`\n${url}\n↓`); 21 console.log(url.replace(/(.*?)(?<!/color)(/(abc|def)(/.*|$))/, "$1/color$2")); 22} 23
実行結果は次のようになります。
https://test.jp/test/abc ↓ https://test.jp/test/color/abc https://test.jp/test/color/abc/ ↓ https://test.jp/test/color/abc/ https://test.jp/test/def/ ↓ https://test.jp/test/color/def/ https://test.jp/test/color/def/ ↓ https://test.jp/test/color/def/ https://test.jp/test2/abc/ ↓ https://test.jp/test2/color/abc/ https://test.jp/test2/color/abc/ ↓ https://test.jp/test2/color/abc/ https://test.jp/test2/def/ ↓ https://test.jp/test2/color/def/ https://test.jp/test2/color/def/ ↓ https://test.jp/test2/color/def/ https://kokyaku.net/abc/ ↓ https://kokyaku.net/color/abc/ https://kokyaku.net/color/abc/ ↓ https://kokyaku.net/color/abc/ https://kokyaku.net/def/ ↓ https://kokyaku.net/color/def/ https://kokyaku.net/color/def/ ↓ https://kokyaku.net/color/def/ https://kokyaku.net/abc/abc ↓ https://kokyaku.net/color/abc/abc https://kokyaku.net/def/abc ↓ https://kokyaku.net/color/def/abc https://kokyaku.net/abc.def/ ↓ https://kokyaku.net/abc.def/
追記
abc も def も無いケースがあるということなので、やはりルートを指定する必要があります。次のコードではルートを配列に入れてそれを使います。
JavaScript
1const testStrings = [ 2 "https://test.jp/test/abc", 3 "https://test.jp/test/color/abc/", 4 "https://test.jp/test/def/", 5 "https://test.jp/test/color/def/", 6 "https://test.jp/test2/abc/", 7 "https://test.jp/test2/color/abc/", 8 "https://test.jp/test2/def/", 9 "https://test.jp/test2/color/def/", 10 "https://kokyaku.net/abc/", 11 "https://kokyaku.net/color/abc/", 12 "https://kokyaku.net/def/", 13 "https://kokyaku.net/color/def/", 14 15 "https://kokyaku.net/abc/abc", 16 "https://kokyaku.net/def/abc", 17 "https://kokyaku.net/abc.def/", 18 "https://kokyaku.net/index.html" 19] 20 21// ルート指定 22const roots = [ 23 "https://test.jp/test/", 24 "https://test.jp/test2/", 25 "https://kokyaku.net/" 26]; 27 28// 正規表現をエスケープする 29const escapeRegularExpression = re => { 30 return re.replace(/[\^$*+?.(){[|]/g, a => `\${a}`); 31}; 32 33const insertColor = source => { 34 const rootRe = roots 35 .map(a => escapeRegularExpression(a)) 36 .join("|"); 37 const re = new RegExp(`^(${rootRe})(.*)`); 38 return source.indexOf("/color/") == -1 39 ? source.replace(re, "$1color/$2") 40 : source; 41}; 42 43for (const url of testStrings) { 44 console.log(insertColor(url)); 45}
投稿2020/09/23 22:32
編集2020/09/24 04:52
総合スコア28669
ご回答ありがとうございます。
こちら試してみたのですが、ルート直下のものがcolorに変換されません。
var page_url = location.href;
const replaced = page_url.replace(/(.*?)(?<!/color)(/(abc|def)(/.*|$))/, "$1/color$2");
↑をlogで出すと、現在のURLがそのまま表示されます。
その時の page_url はどうなっていますか？
replacedと一緒で、現在のURLそのままです。
page_url の中身を書いてください。
↑でvar page_url = location.href;
にしていて、console.logは
http://test.jp/test1/index.html
と表示されます。
0
ベストアンサー
前質問
前質問の回答をそのまま使えると思いますが、pathnameを覚えていますか。
URL#hostname
前提条件を下記として、
| 環境 | URL | ルートディレクトリ |
|---|---|---|
| 開発環境1 | https://test.jp/test/ | /test/ |
| 開発環境2 | https://test.jp/test2/ | /test2/ |
| 客用環境 | https://kokyaku.net/ | / |
hostnameの値に応じて、消費するディレクトリ数を可変して下さい。
JavaScript
1function toColorPathname (urlString) { 2 const url = new URL(urlString); 3 const map = new Map([['test.jp', 1],['kokyaku.net',0]]); 4 5 return url.pathname.replace(new RegExp('^(/(?:[^/]*/){' + map.get(url.hostname) + '})'), '$1color/'); 6} 7 8console.log(toColorPathname('https://test.jp/test/foo/index.html')); // "/test/color/foo/index.html" 9console.log(toColorPathname('https://test.jp/test2/bar/index.html')); // "/test2/color/bar/index.html" 10console.log(toColorPathname('https://kokyaku.net/piyo/index.html')); // "/color/piyo/index.html"
new URL()
前章では、hostname(絶対パス)を得る形式でしたが、URLのインスタンスを持つ形式にしておくと、今後、URL関連の操作が必要になった際に拡張が楽になります。
JavaScript
1'use strict'; 2function toColorUrl (urlString) { 3 const url = new URL(urlString); 4 const map = new Map([['test.jp', 1],['kokyaku.net',0]]); 5 6 url.pathname = url.pathname.replace(new RegExp('^(/(?:[^/]*/){' + map.get(url.hostname) + '})'), '$1color/'); 7 return url; 8} 9 10const srcList = ['https://test.jp/test/foo/index.html', 'https://test.jp/test2/bar/index.html', 'https://kokyaku.net/piyo/index.html']; 11const colorList = ['https://test.jp/test/color/foo/index.html', 'https://test.jp/test2/color/bar/index.html', 'https://kokyaku.net/color/piyo/index.html']; 12const resultList = []; 13 14for (let src of srcList) { 15 resultList.push(toColorUrl(src)); 16} 17 18console.log(JSON.stringify(colorList)); // ["https://test.jp/test/color/foo/index.html","https://test.jp/test2/color/bar/index.html","https://kokyaku.net/color/piyo/index.html"] 19console.log(JSON.stringify(resultList)); // ["https://test.jp/test/color/foo/index.html","https://test.jp/test2/color/bar/index.html","https://kokyaku.net/color/piyo/index.html"] 20console.assert(JSON.stringify(colorList) === JSON.stringify(resultList));
Re: meli さん
投稿2020/09/23 12:43
編集2020/09/24 01:01
総合スコア18189
今回もすみません、、、
pathname を使ってルートパスを取得する方法がわからずです。
複数階層でのルートパスの取得はどうすればよいのでしょうか…；；
削除
ルートパスとは
開発環境1が /test/
開発環境1が /test2/
客用環境が /
を指していますか。
開発環境1が2つありますね…。
そうです！書き方がおかしくてすみません！
ルートディレクトリですかね、、？
開発環境2に修正しました、すみません。
ルートディレクトリは / ただ一つと思いますが、一応、その表現で回答しました。
Adobeは「サイトルート」という言葉を発明しているようですね。
(一般呼称ではありませんが)
親記事に追記しました。
前質問を踏まえると、今後、URL関連の操作が増えてきそうなので、「元URL」と「/color/ URL」をそれぞれURLのインスタンスとして保持しておき、必要に応じて操作すると良いかもしれません。
ご丁寧に解説までありがとうございます…！
インスタンスの保持も考慮した方がよいですね。
試してみます、ありがとうございます！
あなたの回答
tips
プレビュー
