【JavaScript入門】文字列処理

　Webページを開発するうえで、文字列処理は避けて通れない大切な要素です。ユーザーからの入力やサーバーから受け取ったテキストなど、さまざまな場面で文字列を操作する必要が出てきます。JavaScript では、正規表現を用いたパターン検索・置換や、文字列をあつかうメソッドが多数用意されています。ここでは、正規表現 (RegExp) の基本的な使い方と、String オブジェクトに備わる代表的なメソッドを中心に見ていきます。

１．正規表現 (RegExp)

1.1．正規表現リテラル

　JavaScript の正規表現は、/パターン/フラグ というリテラル形式で書くことができます。たとえば、/ab+c/i は「文字列中に“ab+c”というパターンを大文字小文字の区別なしで探す」という意味です。正規表現を使えば、文字列の検索や置換を非常に柔軟におこなえます。

1.2．RegExp オブジェクト

　正規表現リテラル以外にも、RegExp コンストラクターを使って動的に正規表現を作ることが可能です。引数にパターン文字列とフラグを渡すことで、同じように正規表現を扱えます。

２．String オブジェクトの主なメソッド

2.1．検索や置換

match()：正規表現や部分文字列にマッチするかどうかを調べる。
search()：パターンが最初に見つかるインデックスを返す。
replace()：正規表現や文字列に合致した部分を別の文字列に置き換える。

2.2．基本的な文字列操作

slice(start, end)：指定した範囲の文字列を取り出す。
toUpperCase() / toLowerCase()：文字列を大文字/小文字に変換
split(separator)：文字列を区切り文字（separator）で分割し、配列を返す。
trim()：文字列の前後の空白を取り除く。

３．サンプルプログラム

【myStringProcessing.html】

　この例では、正規表現を使った検索 (match) と、文字列の置換 (replace)、大文字変換 (toUpperCase)、部分文字列の切り出し (slice)、分割 (split)、空白除去 (trim) といった主要な文字列操作をまとめて実践できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myStringProcessing.html</title>
</head>
<body>
  <h1>文字列処理のサンプル</h1>
  <p>ブラウザの開発者ツール(コンソール)を開いて結果をチェックしてください。</p>

  <script>
    // 1) 正規表現リテラルでパターン検索
    console.log('--- 正規表現での検索例 ---');
    const text = 'JavaScriptでは、正規表現を使った文字列操作が可能です。';
    const pattern = /javascript/i; // 大文字・小文字を区別しない
    const matchResult = text.match(pattern);
    console.log('検索対象:', text);
    console.log('正規表現パターン:', pattern);
    console.log('マッチ結果:', matchResult); // 見つかれば配列、なければ null

    // 2) 文字列の基本的なメソッド
    console.log('--- 文字列操作の例 ---');
    let replacedText = text.replace('正規表現', 'RegExp');
    console.log('replace後:', replacedText);

    // 大文字に変換
    console.log('大文字:', replacedText.toUpperCase());

    // 部分文字列の切り出し
    console.log('slice(0, 10):', replacedText.slice(0, 10));

    // 分割
    let splitted = replacedText.split('、'); 
    console.log('split("、"):', splitted);

    // 前後の空白除去
    let spaced = '   先頭と末尾に空白   ';
    console.log('trim前:', JSON.stringify(spaced));
    console.log('trim後:', JSON.stringify(spaced.trim()));
  </script>
</body>
</html>

デバックコンソールの出力

--- 正規表現での検索例 ---
検索対象: JavaScriptでは、正規表現を使った文字列操作が可能です。
正規表現パターン: /javascript/i
マッチ結果: (1) ['JavaScript', index: 0, input: 'JavaScriptでは、正規表現を使った文字列操作が可能です。', groups: undefined]
--- 文字列操作の例 ---
replace後: JavaScriptでは、RegExpを使った文字列操作が可能です。
大文字: JAVASCRIPTでは、REGEXPを使った文字列操作が可能です。
slice(0, 10): JavaScript
split("、"): (2) ['JavaScriptでは', 'RegExpを使った文字列操作が可能です。']
trim前: "   先頭と末尾に空白   "
trim後: "先頭と末尾に空白"

まとめ

正規表現 は複雑なパターン検索や置換に威力を発揮し、リテラル (/.../flags) や RegExp オブジェクトで記述できる。
String オブジェクト のさまざまなメソッドを使えば、部分文字列の抽出や置換、変換など、多くの文字列操作がスムーズに行える。
ユーザーの入力チェックやテキスト解析など、多種多様な場面でこれらの機能が役に立つ。