jQueryで文字列の前方一致や後方一致を判別する方法

2020-01-04jQuery, jQuery 取得

文字列の前方一致や後方一致を判別する方法

文字列の前方一致や後方一致を判別する方法です。

判別にはJavaScriptのstartsWith()を使って前方一致、後方一致にはendsWith()を利用しています。

startsWith()とendsWith()はECMAScript 2015から追加されたメゾットで、古いブラウザでは未対応の可能性があります（現行主流ブラウザではIE以外対応済み）。

文字列の前方一致判別サンプル

文字列の前方一致判別にはJavaScriptのstartsWith()関数を利用しています。

startsWith()は対象文字列の先頭から判別文字と一致するかどうか判別して、一致すればtrue、不一致であればfalseを返します。

startsWith()はマルチバイト文字での前方一致判別にも対応しています。

if(`対象文字列`.startsWith(`判別文字列`)){
  //true
}else{
  //false
}

また第2引数を指定する事で判別する文字列の開始位置を指定可能です。

startsWith(`判別文字列`,判別開始位置)

動作サンプル

See the Pen jQuery string startsWith() by yochans (@yochans) on CodePen.

サンプルコード

HTML

<div id="log"></div>

jQuery

let text = `abcdefg`;

if(text.endsWith(`efg`)){
  $('#log').append(`<p>後方一致しています</p>`);
}else{
  $('#log').append(`<p>後方一致していません</p>`);
}

文字列の後方一致判別サンプル

文字列の後方一致判別にはJavaScriptのendsWith()関数を利用しています。

endsWith()は対象文字列の末尾から判別文字列と一致するかどうか判別して、一致すればtrue、不一致であればfalseを返します。

endsWith()はマルチバイト文字での後方一致判別にも対応しています。

let text = `対象文字列`;

if(text.endsWith(`判別文字列`)){
  //true
}else{
  //false
}

動作サンプル

See the Pen jQuery string endsWith() by yochans (@yochans) on CodePen.

サンプルコード

HTML

<div id="log"></div>

jQuery

let text = `abcdefg`;

if(text.endsWith(`efg`)){
  $('#log').append(`<p>後方一致しています</p>`);
}else{
  $('#log').append(`<p>後方一致していません</p>`);
}

startsWith()、endsWith()で複数の判別文字を指定したい場合

複数の判別文字を条件としたい場合、startsWith()、endsWith()では配列（array）での指定はエラーとなります。

また、正規表現も利用できません。

複数の判別文字を対象にしたり、正規表現に対応するにはmatch()やtest()などを利用します。

複数の判別文字で前方一致判別

See the Pen jQuery string Forward match by yochans (@yochans) on CodePen.

サンプルではmatch()に正規表現「^」を使って前方一致、「|」で区切って複数参照を実行しています。

let text = `abcdefg`;

if(text.match(/^abc|^cde/)){
  $('#log').append(`<p>前方一致しています</p>`);
}else{
  $('#log').append(`<p>前方一致していません</p>`);
}

複数の判別文字で後方一致判別

See the Pen jQuery string Multiple backward matches by yochans (@yochans) on CodePen.

サンプルではmatch()に正規表現「$」を使って後方一致、「|」で区切って複数参照を実行しています。

let text = `abcdefg`;

if(text.match(/cde$|efg$/)){
  $('#log').append(`<p>後方一致しています</p>`);
}else{
  $('#log').append(`<p>後方一致していません</p>`);
}

JavaScriptでの文字列の前方一致や後方一致を判別する方法は以下ページにて紹介しています。

JavaScriptで文字列の前方一致や後方一致を判別する方法 | ONE NOTES

2020-01-04jQuery, jQuery 取得

Posted by Yousuke.U