この記事は、JavaScriptを使用して特定の文字列を検索する方法を紹介します。
JavaScriptを使用すれば意図した文字列が含まれているか?含まれていないかを簡単に判断する事が出来ます。
これを応用すれば複雑な検索システムやスパム対策システムなどを作成する事ができる様になるので、まずは今回紹介する検索の基本を覚えましょう。
- 文字列が何処にあるかを調べたい
- 文字列が含まれているか調べたい
- 不適切な語が含まれていないか調べたい
難易度(MAX10) | ★★★★★★☆☆☆☆ |
文字列を検索する方法1(インデックスを調べる)
対象文字列.indeOf(‘検索したい文字列’),[*検索開始インデックス] | 文字列が最初に現れるインデックス |
対象文字列.lastindexOf(‘検索したい文字列’),[*検索開始インデックス] | 文字列が最後に現れるインデックス |
対象文字列.search(正規表現) | 正規表現いマッチする文字列のインデックス |
上記は文字列から特定の文字列を見つけたい場合に使うメソッドです。
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で表示させています。

上記の見本のコードは以下です。
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>
JavaScript
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、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の基礎19」でした。