.indexOf()

JavaScriptの.indexOf()でURLを部分一致で検索して一致する場合にモーダルを表示

2022年8月2日 9分

今回は、JavaScriptの .indexOf() の検索を使ってモーダルを表示させてみます。

比較的カスタマイズしやすく、応用させやすいメソッドなので是非最後までご覧いただけると嬉しいです。

.indexOf()
URLを部分一致でモーダルを出すサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

.indexOf()

JavaScriptの .indexOf() は、文字列または配列に特定の値が含まれるか検索するメソッドです。

var url = location.href;
var indextext = url.indexOf(’検索する文字列’);
  console.log(indextext);

指定された値が最初に現れたインデックス番号を返します。検索をした時にもし対象の文字列が含まれなかった場合は、返り値として数値の-1が返されます。

インデックス番号とは？

インデックス番号とは、配列の0から始まる要素の番号のことです。例えば、配列の1つ目の要素のインデックスは0で、2つ目は1、3つ目は2という具合に増えていきます。

部分一致の条件分岐

この記事では「部分一致」の条件分岐を使用しています。

indexOf()でマッチしなかったとき-1を返し、マッチしたときには0以上の整数を返す。この仕組みを利用することで部分一致の判定を実現できます。

var url  = 'javascript';
var searchword = 'script';

if (url.indexOf(searchword) > -1) {
 // 条件分岐で部分一致した時の処理
}

この条件分岐の方法は、以下の記事を参考にさせていただきました。

参考JavaScriptの文字列マッチングまとめ(indexOf, lastIndexOf) – QiitaQiita

かかかず

完全一致と前方・後方一致の条件分岐の方法がまとまった記事なので、チェックしてみてください。

URLを部分一致でモーダルを出すサンプル

早速サンプルです。

この記事では、URLに「javascript」が含まれる場合にモーダルが出る設定です。

この記事のURLは「https://dubdesign.net/javascript/indexof-ifelse/」で「javascript」が含まれるので、以下のようにモーダルが表示されます。

かかかず

もう一回モーダルの表示を見る場合は、上記の「ページ更新」ボタンをクリックしてください。

実装の手順と方法

コードの解説の前に、ざっくりとした実装の手順と方法について解説します。

モーダルのHTMLを記述

まずはじめに、HTMLを記述します。HTMLはモーダルを表示するコードです。

コードを表示

<div class="popup" id="firstTimeModal">
  <div class="popup-inner">
    <div class="modalCloseButton" id="modalCloseCloss"><span class="lineClose"></span></div>
    <img src="https://dubdesign.net/wp-content/uploads/2022/02/java_modaltoc-1024x587.jpg" alt="ポップアップ画像">
    <div class="modalBottom"><p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市。</p></div>
  </div>
  <div class="black-background" id="js-black-bg"></div>
</div>

JavaScriptを記述

次にJavaScriptのコードをページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

window.addEventListener("DOMContentLoaded", () => {

// 現在のURLを取得して整形
var href = location.href;
var ary = href.split('/');
var str = ary[ary.length - 1];
var url = href.replace(str, '');
// URLを部分一致で検索する文字列
var searchword = 'javascript';
  console.log(url);
  console.log(searchword);
var indextext = url.indexOf(searchword);
  console.log(indextext);

  // 部分一致で条件分岐
  if (url.indexOf(searchword) > -1) {
    // 「javascript」の文字がURLに含まれる場合の処理

  // モーダル 
  var popup = document.getElementById('firstTimeModal');
  if(!popup) return;
  popup.classList.add('is-show');

  var blackBg = document.getElementById('js-black-bg');
  var closeBtn = document.getElementById('modalCloseCloss');

  closePopUp(blackBg);
  closePopUp(closeBtn);

  function closePopUp(elem) {
    if(!elem) return;
    elem.addEventListener('click', function() {
      popup.classList.remove('is-show');
    })
  }
}
 
});

CSSを記述

最後に、CSSを記述して見た目を整えます。

コードを表示

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 600px;
  background-color: #fff;
  z-index: 2;
  border-radius: 3px;
}
.popup-inner img {
  width: 100%;
  border-radius: 3px 3px 0 0;
}
div#modalCloseCloss:hover {
    opacity: 0.7;
}
.modalCloseButton {
    position: absolute;
    left: 92%;
    top: -48px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}
.lineClose {
    display: inline-block;
    vertical-align: middle;
    color: #FFF;
    line-height: 1;
    width: 2rem;
    height: 0.2rem;
    background: currentColor;
    border-radius: 0.1rem;
    position: relative;
    transform: rotate(45deg);
}
.lineClose::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
  z-index: 1;
  cursor: pointer;
}
.modalBottom {
    padding: 22px 30px;
}
.modalBottom p {
    margin: 0;
}

かかかず

これで完成です。

ざっくりとしたコードの解説

コードは、モーダルのHTML・条件分岐のJavaScript・モーダルの見た目を整えるCSSの3種類です。これらのコードについて、順に解説していきます。

HTML

HTMLは、モーダルに関しての記述で「firstTimeModal」のidを持つ要素の中に、モーダルを閉じるボタンや、モーダルで表示する中身を記述します。

<div class="popup" id="firstTimeModal">
  <div class="popup-inner">
    <div class="modalCloseButton" id="modalCloseCloss"><span class="lineClose"></span></div>
    <img src="https://dubdesign.net/wp-content/uploads/2022/02/java_modaltoc-1024x587.jpg" alt="ポップアップ画像">
    <div class="modalBottom"><p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市。</p></div>
  </div>
  <div class="black-background" id="js-black-bg"></div>
</div>

idが「modalCloseCloss」の div タグが、表示されたモーダルを閉じる要素。idが「js-black-bg」の div タグがモーダルの背景の要素で、この2つのどちらかがクリックされることでモーダルが非表示になります。

JavaScript

JavaScriptは、HTML 文書の読み込みと解析が完了したときに発生する.addEventListener の DOMContentLoaded で、処理内容を記述しています。

window.addEventListener("DOMContentLoaded", () => {

// 現在のURLを取得して整形
var href = location.href;
var ary = href.split('/');
var str = ary[ary.length - 1];
var url = href.replace(str, '');
// URLを部分一致で検索する文字列
var searchword = 'javascript';
  console.log(url);
  console.log(searchword);
var indextext = url.indexOf(searchword);
  console.log(indextext);

  // 部分一致で条件分岐
  if (url.indexOf(searchword) > -1) {
    // 「javascript」の文字がURLに含まれる場合の処理

  // モーダル 
  var popup = document.getElementById('firstTimeModal');
  if(!popup) return;
  popup.classList.add('is-show');

  var blackBg = document.getElementById('js-black-bg');
  var closeBtn = document.getElementById('modalCloseCloss');

  closePopUp(blackBg);
  closePopUp(closeBtn);

  function closePopUp(elem) {
    if(!elem) return;
    elem.addEventListener('click', function() {
      popup.classList.remove('is-show');
    })
  }
}
 
});

詳細の処理内容はコメントアウトにそれぞれ記載していますが、冒頭でページのURLを取得して整形。そして、指定した文字列との部分一致の検索で処理内容を記述してモーダルを表示します。

CSS

CSSは、モーダルに関する記述のみです。「.is-show」のclassが付くものはJavaScriptでモーダルの表示になった時の記述です。

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 600px;
  background-color: #fff;
  z-index: 2;
  border-radius: 3px;
}
.popup-inner img {
  width: 100%;
  border-radius: 3px 3px 0 0;
}
div#modalCloseCloss:hover {
    opacity: 0.7;
}
.modalCloseButton {
    position: absolute;
    left: 92%;
    top: -48px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}
.lineClose {
    display: inline-block;
    vertical-align: middle;
    color: #FFF;
    line-height: 1;
    width: 2rem;
    height: 0.2rem;
    background: currentColor;
    border-radius: 0.1rem;
    position: relative;
    transform: rotate(45deg);
}
.lineClose::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
  z-index: 1;
  cursor: pointer;
}
.modalBottom {
    padding: 22px 30px;
}
.modalBottom p {
    margin: 0;
}