SCSS　文字列から指定する文字列が見つかったインデックス番号を取得する方法

SCSSで文字列内に特定の文字列が存在する場合に、そのインデックス番号を取得する方法を解説します。

SCSSで文字列内に特定の文字列が存在する場合に、そのインデックス番号を取得する方法を教えてください！

文字列から特定の文字列を探し、そのインデックス番号を取得するには、index関数を使用します。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー 公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

index関数とは？

index関数は、SCSSの文字列操作でよく使用される関数の1つで、指定した文字列が現れる最初の位置のインデックス番号を返す関数です。

例えば、以下のような文字列があったとします。

$target-str: "Hello World";

この文字列内に “World” という文字列が存在するかどうかを調べ、存在する場合にそのインデックス番号を取得するには、以下のように index関数を使用します。

$index: index($target-str, "World");

上記の例では、$target-strの文字列内で “World” が最初に現れる位置のインデックス番号を $index に代入しています。

もし、文字列内に検索対象の文字列が存在しない場合、index関数は0を返します。

index関数を使った文字列内の文字列検索方法

index関数を使って取得したインデックス番号は、様々な方法で活用することができます。

以下は、SCSSでindex関数を使った文字列内の文字列検索を行うサンプルプログラムです。

// 検索対象となる文字列を定義する
$target-str: "Hello, World! How are you?";

// 検索したい文字列を定義する
$search-str: "World";

// index関数を使用して文字列を検索する
$index: index($target-str, $search-str);

// 結果を表示する
@debug $index;

上記のプログラムでは、検索対象となる文字列と検索したい文字列を定義し、それらを引数として index関数を使用しています。そして、結果を @debug で表示しています。

もし、検索対象の文字列内に検索したい文字列が複数ある場合は、index関数は最初に現れた位置のインデックス番号を返します。また、検索対象の文字列内に検索したい文字列が存在しない場合には、0を返します。

index関数を使って取得したインデックス番号の使い方

以下は、index関数を使って取得したインデックス番号を使って、文字を切り取って他の文字を代入する使い方の一例です。

$target-str: "Hello, World! How are you?";

// "World" の部分だけを取り出す
$index: index($target-str, "World");
$result: str-slice($target-str, $index, ($index + str-length("World")));
// 出力： "World"

// "World" を "SCSS" に置き換える
$index: index($target-str, "World");
$result: str-insert("SCSS", $target-str, $index, str-length("World"));
// 出力： "Hello, SCSS! How are you?"

上記の例では、まず「Hello, World! How are you?」という文字列を変数 $target-str に代入しています。次に、index関数を使って文字列内の「World」の部分のインデックス番号を取得し、その結果を変数 $index に代入しています。

次に、str-slice関数を使って、元の文字列から「World」の部分を切り出し、変数 $result に代入しています。この結果、「World」という文字列が出力されます。

最後に、str-insert関数を使って、「World」の部分を「SCSS」に置き換え、変数 $result に代入しています。この結果、「Hello, SCSS! How are you?」という文字列が出力されます。

その他のインデックス番号の取得方法

SCSSには、index関数以外にも文字列操作に便利なstr-index、str-searchという関数があります。

str-indexは、指定した文字列が対象の文字列内に存在する場合、最初のインデックス番号を返します。ただし、指定した文字列が存在しない場合は-1を返します。

str-searchは、指定した文字列が対象の文字列内に存在する場合、最初にマッチした箇所のインデックス番号を返します。index関数との違いは、str-searchは大文字小文字を区別しないことです。

例えば、以下のように使用することができます。

str-index("hello, world", "o"); // 4
str-search("hello, world", "O"); // 4

また、str-searchには第三引数として開始位置を指定することができます。以下のように使用することができます。

str-search("hello, world", "o", 5); // 8

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

SCSSで文字列内に特定の文字列が存在する場合に、そのインデックス番号を取得する方法を解説しました。

index関数で文字列の存在を取得することができました。他の関数も便利そうです！

文字列操作はWeb開発においてとても役に立つ機能です。SCSSで文字列を操作する際は、index関数を使って検索する文字列の位置を正確に取得しましょう。