文字列操作の達人になる：jQueryとJavaScriptでstartsWith、endsWith、indexOf、lastIndexOfを駆使する

2024-06-22

jQueryで文字列が特定の文字列で始まる/終わるかどうかを確認する方法

jQueryには、文字列操作を簡単に行うための便利なメソッドが用意されています。その中でも、startsWithとendsWithメソッドは、特定の文字列が別の文字列の頭/末尾に存在するかどうかを判定するのに役立ちます。

startsWithメソッド

説明:

startsWith(prefix) メソッドは、対象文字列が prefix で始まるかどうかを調べます。
prefix は、一致を確認したい文字列を指定します。
一致する場合、true を返します。そうでない場合は、false を返します。

例:

const str = "Hello, world!";
const prefix = "Hello";

if (str.startsWith(prefix)) {
  console.log("The string starts with the prefix.");
} else {
  console.log("The string does not start with the prefix.");
}

出力:

The string starts with the prefix.

const str = "Hello, world!";
const suffix = "world!";

if (str.endsWith(suffix)) {
  console.log("The string ends with the suffix.");
} else {
  console.log("The string does not end with the suffix.");
}

The string ends with the suffix.

正規表現を使った方法

より複雑なパターンでの判定には、正規表現を利用する方法もあります。

const str = "JavaScript programming";
const regex = /^JavaScript/; // ^: 行頭, $: 行末

if (regex.test(str)) {
  console.log("The string matches the regex.");
} else {
  console.log("The string does not match the regex.");
}

The string matches the regex.

startsWith と endsWith メソッドは、単純な前方/後方一致の判定に便利です。
状況に応じて適切な方法を選択しましょう。

補足:

上記の例では、文字列リテラルを使用していますが、変数に格納された文字列を使用することもできます。
メソッドの引数は、大文字小文字を区別します。一致判定を大文字小文字無関係に行いたい場合は、toLowerCase() や toUpperCase() メソッドで事前に文字列を小文字/大文字に変換する必要があります。

// startsWithメソッドの例
const str = "Hello, world!";
const prefix = "Hello";

if (str.startsWith(prefix)) {
  console.log("The string starts with the prefix.");
} else {
  console.log("The string does not start with the prefix.");
}

// endsWithメソッドの例
const suffix = "world!";

if (str.endsWith(suffix)) {
  console.log("The string ends with the suffix.");
} else {
  console.log("The string does not end with the suffix.");
}

const str = "JavaScript programming";
const regex = /^JavaScript/; // ^: 行頭, $: 行末

if (regex.test(str)) {
  console.log("The string matches the regex.");
} else {
  console.log("The string does not match the regex.");
}

jQueryを使った例

// jQueryでDOM要素のテキストを取得
const text = $("p").text();

// startsWithメソッドとendsWithメソッドを使用して判定
if (text.startsWith("Hello")) {
  console.log("The text starts with 'Hello'.");
} else {
  console.log("The text does not start with 'Hello'.");
}

if (text.endsWith("world!")) {
  console.log("The text ends with 'world!'.");
} else {
  console.log("The text does not end with 'world!'.");
}

上記の例では、様々な方法で文字列の一致判定を行っています。
それぞれの例は、コメントで説明されていますので、参考にしてください。
jQueryを使った例では、DOM要素のテキストを取得して判定を行っています。

他の方法

indexOf(search) メソッドは、対象文字列 (search) が初めて出現する位置を調べます。
一致が見つからない場合は、-1 を返します。

const str = "Hello, world!";
const prefix = "Hello";
const suffix = "world!";

// startsWithメソッドの例
if (str.indexOf(prefix) === 0) {
  console.log("The string starts with the prefix.");
} else {
  console.log("The string does not start with the prefix.");
}

// endsWithメソッドの例
const strLength = str.length;
if (str.lastIndexOf(suffix) === strLength - suffix.length) {
  console.log("The string ends with the suffix.");
} else {
  console.log("The string does not end with the suffix.");
}

部分一致と完全一致

上記の方法は、部分一致のみを判定します。完全一致を判定するには、以下の方法があります。

startsWith() と endsWith() メソッドを組み合わせる:

const str = "Hello, world!";
const prefix = "Hello";
const suffix = "world!";

if (str.startsWith(prefix) && str.endsWith(suffix)) {
  console.log("The string is exactly equal to 'Hello, world!'.");
} else {
  console.log("The string is not exactly equal to 'Hello, world!'.");
}

length プロパティを利用する:

const str = "Hello, world!";
const prefix = "Hello";
const suffix = "world!";

if (str.length === prefix.length + suffix.length && str.startsWith(prefix) && str.endsWith(suffix)) {
  console.log("The string is exactly equal to 'Hello, world!'.");
} else {
  console.log("The string is not exactly equal to 'Hello, world!'.");
}

サブストリングと比較

const str = "Hello, world!";
const prefix = "Hello";
const suffix = "world!";

if (str.substring(0, prefix.length) === prefix && str.substring(str.length - suffix.length) === suffix) {
  console.log("The string is exactly equal to 'Hello, world!'.");
} else {
  console.log("The string is not exactly equal to 'Hello, world!'.");
}