NEW ARTICLE
PyCharm 最近の変更を一覧表示するショートカットキー
  1. HOME
  2. javascript
  3. javascript 文字列に指定した文字が含まれている位置を取得する

javascript 文字列に指定した文字が含まれている位置を取得する

javascript 文字列に指定した文字が含まれている位置を取得する

javascriptで、indexOf メソッドを使用して、文字列に指定した文字が含まれている位置を取得するサンプルコードを記述してます。ここでは簡単なindexOfメソッド使い方も記述してます。

目次

環境

  • OS windows10 pro 64bit
  • Nginx 1.18.0
  • ブラウザ chrome 102.0.5005.63
Javascript サンプル集はこちら

indexOfメソッド使い方

indexOfメソッドは、文字列に指定した文字があれば、その先頭の位置を返してくれます。
※位置は「0」から始まります。

文字列.indexOf( 検索したい文字　[, 検索開始位置])

indexOfメソッド使用例

let str = 'abcde';

console.log( str.indexOf('a') );
// 結果 0
// 0から始まる

console.log( str.indexOf('c') );
// 結果 2

console.log( str.indexOf('de') ); 
// 結果 3

console.log( str.indexOf('z') );
// 結果 -1  
// 結果が無ければ-1が返ってくる

console.log( str.indexOf('A') );  
// 結果 -1 
// 大文字小文字は区別される

console.log( str.indexOf('c',4 ) );
// 結果 -1 
// 検索開始位置に含まれないので-1

サンプルコード

以下は、用意した文字列「hello world」の中からテキストフォームに入力した文字が含まれる位置を表示するサンプルコードとなります。

※cssには「uikit」を使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- UIkit CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/css/uikit.min.css" />

  <!-- UIkit JS -->
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit-icons.min.js"></script>
</head>
<style>
  .main {
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
  }
</style>
<script>

  function search() {

    //hello worldより検索
    let str = document.getElementById("txt").textContent;
    console.log(str);

    //適当な文字列を用意
    let search = document.getElementById("textbox").value;
    console.log(search);
    
    //innerHTMLを使用して表示
    let result = document.getElementById("result");
    result.innerHTML = str.indexOf(search);

  }

</script>

<body>
  <div class="main">
    <div class="uk-light uk-background-secondary uk-padding">
      <h3 id="txt">hello world</h3>
      <p id="result"></p>
      <form>
        <fieldset class="uk-fieldset">

          <div class="uk-margin">
            <input id="textbox" class="uk-input" type="text" placeholder="検索する文字列">
          </div>

        </fieldset>
      </form>
      <button class="uk-button uk-button-default" onclick="search()">Button</button>
    </div>
  </div>
</body>

</html>

含まれている場合は位置の番号が表示されます。

また、javascriptは以下のようにdocument.getElementByIdを省略して記述することもできます。関数もアロー関数を使用して記述できます。
アロー関数の使い方
const search = () =>{

    var str = txt.textContent;

    result.innerHTML = str.indexOf(textbox.value);

}