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での文字列の前方一致や後方一致を判別する方法は以下ページにて紹介しています。