文字列を検索する方法：JavaScriptの基礎19

この記事は、JavaScriptを使用して特定の文字列を検索する方法を紹介します。
JavaScriptを使用すれば意図した文字列が含まれているか？含まれていないかを簡単に判断する事が出来ます。
これを応用すれば複雑な検索システムやスパム対策システムなどを作成する事ができる様になるので、まずは今回紹介する検索の基本を覚えましょう。

文字列を検索する方法1(インデックスを調べる)

上記は文字列から特定の文字列を見つけたい場合に使うメソッドです。
indeOfメソッドは、「対象文字列」の中から「検索したい文字列」が見つかる位置（インデックス）を検索して取得します。

インデックスの開始位置は0からです。
例えば、「あいうえお」の文字列の一番目にある「あ」のインデックスは0です。「い」が1。「う」が2。345と続きます。

また「検索したい文字列」が含まれていない場合は-1が返ります。さらに検索文字列の大文字小文字は区別されないので、「A」と「a」は別の文字列と判断されます。

実際の使い方は以下の通りです。

//対象文字列
const mystrong = 'KT LIFEです';
//含まれる場合
const A1 = mystrong.indexOf('KT LIFE');
console.log(A1);
const A2 = mystrong.indexOf('LIFE')
console.log(A2)
const A3 = mystrong.indexOf('F')
console.log(A3)
//含まれない場合
const B1 = mystrong.indexOf('ブログサイト')
console.log(B1)
const B2 = mystrong.indexOf('kt life')
console.log(B2)
//検索インデックス位置を指定
const C1 = mystrong.indexOf('KT LIFE', 3)
console.log(C1)

以下はHTMLで検索結果を見える様にする簡単な一例です。
「KT LIFEのブログサイト」との文字列中に以下の文字列が何処にあるかを取得して、HTMLで表示させています。

上記の見本のコードは以下です。

<table border="1">
          <tr><th>KT</th><th class="result1"></th></tr>
          <tr><th>LIFE</th><th class="result2"></th></tr>
          <tr><th>ブログ</th><th class="result3"></th></tr>
          <tr><th>F</th><th class="result4"></th></tr>
          <tr><th>kt life</th><th class="result5"></th></tr>
          <tr><th>WEBサイト</th><th class="result6"></th></tr>
        </table>

const target = 'KT LIFEのブログサイト'
document.querySelector('.result1').innerHTML = target.indexOf('KT')
document.querySelector('.result2').innerHTML = target.indexOf('LIFE')
document.querySelector('.result3').innerHTML = target.indexOf('ブログ')
document.querySelector('.result4').innerHTML = target.indexOf('F')
document.querySelector('.result5').innerHTML = target.indexOf('kt life')
document.querySelector('.result6').innerHTML = target.indexOf('WEBサイト')

正規表現で検索

より高度な検索を行う場合は、正規表現を使います。
search()メソッドを使用する事で正規表現にマッチする文字のインデックスを取得します。

const string = 'JAPAN';
const Y1 = string.search(/JAPAN/);
console.log(Y1);
const S1 = string.search(/Japan/);
console.log(S1);
const N1 = string.search(/日本/);
console.log(N1);

文字列を検索する方法2(含まれているかどうか)

includes、startsWith、endsWithメソッドを使う事で、検索したい文字列が含まれているかどうかを調べる事が出来ます。

includesは文字列の何処かに含まれていればtrueとなります。
startsWithは文字列の初めが引数と同じであるかを調べます。
endsWithは文字列の末尾が引数と同じであるかを調べます。

実際の使い方は以下の通りです。

includesの場合

const target = 'KT LIFEのブログサイト'
const A1 = 'KT LIFEのブログサイト'.includes('KT LIFE');
console.log(A1)
const A2 = target.includes('ブログ');
console.log(A2)
const A3 = target.includes('WEBサイト');
console.log(A3)
const A4 = target.includes('kt life');
console.log(A4)

startsWithとendsWithの場合

const target = 'KT LIFEのブログサイト'
const A1 = 'KT LIFEのブログサイト'.startsWith('KT LIFE');
console.log(A1)
const A2 = target.startsWith('ブログサイト');
console.log(A2)
const A3 = target.endsWith('KT LIFE');
console.log(A3)
const A4 = target.endsWith('ブログサイト');
console.log(A4)

このプログラムをお問い合わせフォームパスワード入力項目などに仕込んでおけば、不適切な語を弾いたり、使用できない文字列を使用出来なく出来ます。

JavaScriptで文字列を取り扱う方法まとめ

この記事はJavaScriptで文字列を扱う方法をまとめた記事です。今回紹介するプロパティを覚えれば、長さの取得や検索、置換などをJavaScriptで指示する事が出来ます。

kt-life.net

2020.08.15

以上が「文字列を検索する方法：JavaScriptの基礎19」でした。