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

2019年4月11日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>`);
}

2019年4月11日jQuery文字列

Posted by ヨウスケ