javascript 指定した文字以降の文字列を削除する

作成日 2022.11.17
javascript
javascript

javascriptで、指定した文字以降の文字列を削除するサンプルコードを記述してます。「split」で分割して結果の最初の値を取得することで削除できます。「slice」を使用する方法もあり、パフォーマンスはこちらのほうが良さそうです。

1. 環境
2. 指定した文字以降の文字列を削除
3. slice
4. パフォーマンス比較
5. サンプルコード

環境

OS windows11 pro 64bit
ブラウザ chrome 107.0.5304.88

Javascript サンプル集はこちら

指定した文字以降の文字列を削除

指定した文字以降の文字列を削除するには
1.　「split」で対象の文字列を指定した文字で分割
2.　分割した結果の配列の最初の値を取得
で可能です。

const str = 'abcde';

const result = str.split('c')[0];

console.log(result); // ab

console.log(str); // abcde

空文字にすると空のままとなります。

const str = '';

const result = str.split('c')[0];

console.log(result); //

console.log(str); //

値が存在しない場合は、元の文字列がそのまま返ります。

const str = 'abab';

const result = str.split('c')[0];

console.log(result); // abab

console.log(str); // abab

配列の分割代入を使用する方法もあります。

const str = 'abcdeabcde';

const [zero,one] = str.split('c');

console.log(zero); // ab

console.log(one); // deab

console.log(str); // abcdeabcde

slice

「indexOf」で文字列の位置を取得してから「slice」で分割することもできます。

const str = 'abcdeabcde';

const result = str.slice(0, str.indexOf('c'));

console.log(result); // ab

console.log(str); // abcdeabcde

空文字に使用すると、空文字がそのまま返ります。

const str = '';

const result = str.slice(0, str.indexOf('c'))

console.log(result); //

console.log(str); //

ただし、存在しない値を「indexOf」は値が存在しない場合は「-1」が返るので最後の1文字だけ削除されます。

const str = 'abab';

const result = str.slice(0, str.indexOf('c'))

console.log(result); // aba

なので、存在チェックをしてから使用します。

三項演算子を使ってif文を1行で書く

const str = 'abab';

const num = str.indexOf('c');

const result = (num !== -1) ? str.slice(0, num) : str;

console.log(result); // abab

パフォーマンス比較

パフォーマンスを比較すると、条件を指定しても「slice」を使用したほうが良さそうです。

<script>

  // 実行回数
  const times = 1_000_000;

  // 空白を埋めるだけの関数
  function spacePadding(val, n = 8) {
    for (; val.length < n; val += ' ');
    return val;
  }

  // 計測結果を表示
  const benchmark = (name, start, end) => {
    let report = (end - start).toPrecision(3);
    // 表示を見やすくするため関数名に空白を埋める
    name = spacePadding(name)
    console.log(`実行回数:${times}回 関数名:${name} 実行時間:${report}(ms)`);
  }

  const str = 'abcdeabcdeabcde';
  let result;

  // 計測
  start = performance.now();

  for (let i = 0; i < times; ++i) {
    result = str.split('c')[0];
  }

  end = performance.now();

  benchmark('split', start, end);

  // 計測
  start = performance.now();

  for (let i = 0; i < times; ++i) {
    result = str.slice(0, str.indexOf('c'));
  }

  end = performance.now();

  benchmark('slice', start, end);

  // 計測
  start = performance.now();

  for (let i = 0; i < times; ++i) {
    num = str.indexOf('c');
    result = (num !== -1) ? str.slice(0, num) : str;
  }

  end = performance.now();

  benchmark('条件付きslice', start, end);

</script>

実行結果

実行回数:1000000回 関数名:split    実行時間:87.6(ms)
実行回数:1000000回 関数名:slice    実行時間:12.7(ms)
実行回数:1000000回 関数名:条件付きslice 実行時間:15.3(ms)

サンプルコード

以下は、
「実行」ボタンをクリックすると、テキストフォームに入力された値を初めの半角の空白以降を除去して表示するサンプルコードとなります。

※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-50" style="margin-top:200px">

    <h2><span class="badge badge-warning">結果</span></h2>

    <form>
      <div class="form-group">
        <input type="text" id="setData">
      </div>
    </form>

    <button type="button" onclick="del()" class="btn btn-warning mt-1">
      実行
    </button>

  </div>

  <script>

    const del = () => {

      const num = setData.value.indexOf(' ');

      // 結果を表示
      document.getElementsByClassName('badge')[0].textContent = (num !== -1) ? setData.value.slice(0, num) : setData.value;

    }

  </script>
</body>

</html>

分割されていることが確認できます。