javascript 英語の文章を単語単位でアルファベット順に並び替えをする

作成日 2022.06.26
更新日 2023.01.16
javascript
javascript

javascriptで、英語の文章を単語単位でアルファベット順に並び替えをするサンプルコードを記述してます。「split」と「sort」を使用することで可能です。

1. 環境
2. アルファベット順に並び替え
3. サンプルコード

環境

OS windows11 home
ブラウザ chrome 109.0.5414.75

Javascript サンプル集はこちら

アルファベット順に並び替え

まずは半角スペースで、文字を「split」で区切って配列化して、「sort」で並び替えれば、アルファベット順になります。

const str = "Lorem ipsum dolor sit amet, consectetur adipiscing elit"

const result = str.split(' ').sort();

for (const item of result) {
  console.log(item);
}

実行結果

大文字小文字関係なくソートするにはコールバック関数に、大文字小文字区別せずに比較できる「localeCompare」を使用します。

const str = "Lorem ipsum dolor sit amet, consectetur adipiscing elit"

const result = str.split(' ').sort().sort(function(x, y) { return x.localeCompare(y) });

for (const item of result) {
  console.log(item);
}

実行結果

アロー関数の使い方

const result = str.split(' ').sort().sort((x, y) => x.localeCompare(y));

サンプルコード

以下は、
ボタンをクリックすると、英語の文章を単語単位でソートした結果を表示する
サンプルコードとなります。

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

アロー関数の使い方

<!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.1.0/mdb.min.css" rel="stylesheet" />
</head>
<style>
  .main {
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 25px;
    width: 500px;
  }
</style>

<body>
  <div class="main">

    <h2><span id="word" class="badge badge-success"></span></h2>
    <ul id="txt" class="list-group"></ul>

    <button onclick="hoge()" type="button" class="btn btn-raised btn-info mt-2">
      sort
    </button>

  </div>
  <script>

    const str = "Ut enim ad minim veniam, commodo consequat.";

    word.innerHTML = str

    const hoge = () => {

      // ソートを実行
      let arr = str.split(' ').sort().sort((x, y) => x.localeCompare(y));

      // 結果を表示
      disp(arr, "txt");

    }

    //フロントに表示する関数
    const disp = (arr, id) => {

      let text = [];

      for (let i = 0; i < arr.length; i++) {
        text.push('<li class="list-group-item">' + arr[i] + '</li>');
      }

      //innerHTMLを使用して表示    
      document.getElementById(id).innerHTML = text.join('');

    }

  </script>
</body>

</html>

ソートされていることが確認できます。