Q&A
プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。
前提・実現したいこと
001.html
002.html
...
050.html
など連番になったhtmlを
<button onclick="onLink(1)">< prev</button>
<button onclick="onLink(-1)">next ></button>
のボタンで遷移させたく、
function onLink(i){
var url = document.URL;
url=url.split(".")[0].slice(-3);
if(url=="000"){
return;
}else if(url=="999"){
return;
}
location.href="./"+("000"+(parseInt(url)+i)).slice(-3)+".html";
}
※上記のコードはこちらのままです。
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12127113987
以上のようなjsで動かそうとしています。
ローカルでは動くのですが、
サーバー上のテスト環境に上げた途端
遷移先の番号がNaN.htmlとなったり192.html(アドレスから抽出された？)に固定されてしまいました。
その中でも
url=url.split(".")[0].slice(-3);
こちらのコードがよくわからず、特に
.split(".")[0]
"."と[0]が何を示しているのかわかりません。
初心者で至らないのですが、教えていただけたら幸いです。
よろしくお願いいたします。
url=url.split("\.")[0].slice(-3); は合ってます？ url=url.split(/\./)[0].slice(-3);のような。。
←開発者ツールで叩いたら合ってました。ごめんなさい。
Lhankor_Mhyさんの回答にある location.pathname の方が解決が早いです。ベストアンサーは良いのですが、回答内容を試した後に選んだ方がこの後に悩まなくて済みます。
回答2件
0
document.URLは現在の文書の URL を文字列で返します。（リンク先ドキュメント文言そのまま）
split()は文字列を指定したセパレータで区切って配列で返します。
[0]はその配列の最初の情報を得ようとしていると思います。
で、「サーバー上のテスト環境」はおそらく
192.････のようなホストになっているのではないでしょうか？
url.split(".")[0].slice(-3)を要約すると、
urlに入った文字列を「.」で区切った1番目の文字列の最初から3文字を取得した結果の文字列を返却 です。
つまり、本来は***.htmlの.を感知するのを想定して組んであるが
それより先に . が出てきてしまったため、そちらを感知した ということになります。
※ちなみに.と前に\がついているのは「エスケープ」のためで、なぜかというと.は正規表現で意味を持つため、「単なる[.]という文字列である」と明示するためにそうされています
これを回避するには2つあります。
- 192･･･となっている部分は「ホスト」なので「ホスト」以下のURLを取得するように調整する。 location.host
hostとってきてreplaceすればいけるかなと。
0. 配列の1番目ではなく最後を取得するように調整する
配列のlength-1が最終番号なので、そこから取得できそうです。
上記ヒントにやってみてください。
投稿2018/04/25 04:08
編集2018/04/25 04:11総合スコア80850
理解しやすく見やすい説明、ヒントとして方法を教えてくださって有難うございます。めげずに勉強します。
コメントの方に書きましたが、oooorangeさんのコメントの感じからLhankor_Mhyさんの回答の方が直接解決につながっているように思いますので、ベストアンサーをうつしかえてもらえると・・・。（最終的には質問者さんの判断に委ねますが、後で見返したときにベストアンサーが一番先に目がつきますし）
変更いたしました。ごもっともです。ご回答等々有難うございます。
いえいえ。何かのヒントになったのであれば幸いです。
0
ベストアンサー
.split(".")は、文字列のメソッドです。
String.prototype.split() - JavaScript | MDN
この場合、.を区切り文字として、文字列を配列にします。
たとえば、このページのURL'https://teratail.com/questions/123458'はこのようになります。['https://teratail','com/questions/123458']
[0]は配列の添字です。
Array - JavaScript | MDN
配列は[1,2,3]のように複数の値を順番に並べるようなデータ構造です。先頭を0その次が1……のように「添字」と呼ばれる数字を使うことによって、アクセスをすることができます。
たとえば、先ほどの配列['https://teratail','com/questions/123458']に[0]でアクセスすると、'https://teratail'が得られます。
おそらく、ローカルでのパスには.が含まれておらず動作していたところ、サーバに挙げたのでドメイン名やIPアドレスに含まれる.に引っかかっているのではないかと。
js
1var url = location.pathname;
とすれば、動作するんじゃないでしょうか？
投稿2018/04/25 04:13
総合スコア36115
>location.pathname
自分で参考リンク先を貼っておいてスルーしてしまってました。。。
より難しいやり方を提案してしまった。反省。。
詳しく教えていただきありがとうございます。location.pathnameで解決できました。"."と[0]の部分も丁寧でありがたいです。
mts10806 さん、コメントでのフォローとご配慮、ありがとうございました。
oooorange さん、BAありがとうございます。ご解決されて何よりです。
あなたの回答
tips
プレビュー
