指定した場所の文字列を取り出す方法:JavaScriptの基礎20

Programming

今回はJavaScriptを使用して指定した場所の文字列を取り出す方法を紹介します。

今回のメソッドを利用すれば頭文字のテキストを入力すれば即座にリストアップされる簡易的な検索機能が作れる様になりますので、いろんな応用が効くので是非覚えてみて下さい。

こんな場合に使用

  • 指定した場所の文字列を取得したい
  • 簡易的な検索機能を作成したい
  • ○文字目〜○文字目までを取り出したい
  • ○文字目〜○文字目だけ取り出したい

難易度(MAX10)★★★★★☆☆☆☆

指定した場所の文字列を取り出す方法

文字列.charAt([インデックス*])指定インデックスの文字を取得する
*インデックスは省略可能

JavaScriptで指定した場所の文字列を取り出すにはcharAtメソッドを使用します。
使い方は以下です。

'KT LIFE'.charAt(1) // T
'プログラミング'.charAt(3) //ラ
'JavaScript'.charAt() // J

インデックスの開始地点は0が初めの文字です。なので
'KT LIFE’の2文字目は「K」なので.charAt(1)だと「K」が返されます。
'プログラミング’の4文字目は「ラ」なので.charAt(3)だと「ラ」が返ります。
また引数は省略可能で、その場合の開始地点は0になります。

以下のHTMLとJSはA~Zまでの頭文字を入力するとリストから該当するイニシャルを持つテキストが返される簡易的な検索機能です。

<div>
<label>A〜Zの何かを入力して下さい
<input id="searchword" maxlength="1" type="text"></label>
</div>
<div id="textlist">
<button data-name="Apple" data-phonetic="アップル">Apple</button>
<button data-name="Amazon" data-phonetic="アマゾン">Amazon</button>
<button data-name="Alibaba" data-phonetic="アリババ">Alibaba</button>
<button data-name="Facebook" data-phonetic="フェイスブック">Facebook</button>
<button data-name="Google" data-phonetic="グーグル">Google</button>
<button data-name="Microsoft" data-phonetic="マイクロソフト">Microsoft</button>
<button data-name="Tencent" data-phonetic="テンセント">Tencent</button>
<button data-name="Tencent" data-phonetic="テンセント">Tencent</button>
</div>
const searchword = document.querySelector('#searchword');
const textlist = document.querySelectorAll('#textlist button');

searchword.addEventListener('keyup', () => {
      const search = searchword.value;
      textlist.forEach((element) => {
          if (!search || search === '') {
            element.classList.remove('hide');
            return;
          }
          const textlist = element.dataset.name;
          const phonetic = element.dataset.phonetic;
          if (search.charAt(0) === textlist.charAt(0) || search.charAt(0) === phonetic.charAt(0)) {
            element.classList.remove('hide');
          } else {
            element.classList.add('hide');
          }
        });
    });

今回の記事で上記のコードの解説をすると話がそれまくるので、charAtメソッドを理解すればこんな感じのものも作成できるんだな、程度で大丈夫です。

○文字目〜○文字目までを取り出したい

次は、○文字目〜○文字目までを取り出したい場合のメソッドを紹介します。

文字列.slice(開始インデックス , [終了インデックス*])指定の文字列を取得する
文字列.substring(開始インデックス , [終了インデックス*])指定の文字列を取得する
*終了インデックスは省略可能

ここからここまでと指定した文字列を取り出したい場合は、sliceもしくはsubstringメソッドを使用します。
開始インデックスから終了インデックスの文字列を取得します。終了インデックスは省略可能で、省略した場合は開始インデックス以降の全ての文字列が取得されます。

'KT LIFE'.slice(0 , 1) // KT
'プログラミング'.slice(3 , 6) //ラミング
'JavaScript'.substring(4) // Script

sliceは負の値を使用出来ます。一方substringの場合は負の値は0とみなされるので使用出来ません。
負の値を使用すると文末から数えた数値の開始インデックスor終了インデックスにする事が出来ます。
例えば「プログラミング」の開始位置を-4にした場合は文末の「グ」から反対に数えて4つ目の「ラ」が返されます。

'プログラミング'.slice(0 , -5) //プログ
'JavaScript'.substring(-6) // JavaScript (-6は0とみなされる)

○文字目〜○文字目だけ取り出したい

○文字目〜○文字目だけを取り出したい場合は以下のメソッドを使用します。

文字列.substr(開始インデックス, [何文字取得するか*])指定範囲内の文字列を取得する

substrメソッドは、取り出したい文字数を第二引数に指定します。
○文字目〜○文字目だけを取り出したい場合に使用します。

'JavaScript'.substr(4 , 6) //Script

上記の例文では4番目の文字列を開始インデックスとして、そこから6文字を返す様に指定しています。


以上が「指定した場所の文字列を取り出す方法:JavaScriptの基礎20」でした。

2020年8月22日ProgrammingJava Script,WEB

Posted by KT