【JavaScript】要素の文字列を取得してランダムに並び替える

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで要素の文字列をランダムに並び替える方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

文字列を並び替えるフロー

本記事では下記の流れで文字列の並び替えを実装します。

• 要素を取得する
• 要素のテキストを取得する
• テキストを一文字ずつに分割した配列を生成する
• 配列をランダムに並び替えて文字列に変換する
• 並び替えした文字列を要素のテキストに設定する

要素を取得する

まずは要素の作成～取得まで。ドキュメントにp要素を作成し、並び替えるテキストを持たせておきます。要素の取得にはquerySelectorを使用しています。idやclassは環境に合わせてご変更ください。

HTML

<p class="str">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

JavaScript

const str = document.querySelector('.str');

要素のテキストを取得する

取得した要素が持っているテキストを取得します。テキストの取得にはtextContentを使用します。

HTML

<p class="str">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

JavaScript

const str = document.querySelector('.str');
const text = str.textContent;

テキストを一文字ずつ分割して配列にする

テキストを一文字ずつ分割して配列を生成します。文字列→配列にはsplit()を使用します。split()は文字列を任意の位置で分割して配列にするメソッドで、引数に文字列の分割位置を指定することができます。空文字を指定した場合は一文字ずつの分割になります。

HTML

<p class="str">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

JavaScript

const str = document.querySelector('.str');
const strArray = str.textContent.split('');

配列をランダムに並び替えて文字列に変換する

文字列を一文字ずつに分割して生成した配列をsort()で並び替え、join()で文字列に変換します。sort()内で実行している式でランダムな数字を生成しています。

HTML

<p class="str">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

JavaScript

const str = document.querySelector('.str');
const strArray = str.textContent.split('');

str.textContent = strArray.sort(function(){
    return Math.random()-0.5;
}).join('');

生成される乱数は下記のような値です。0.5を減算することで正負の乱数が生成されます。

0.019255514678734986
0.4413861870321423
-0.018584328268099526
0.3093866255970321

ここまでの内容を実装したものが下記の実行結果です。初回読み込み時に文字列がランダムに並び替えられた状態で表示されます。

実行結果

See the Pen 7417 by ryohei (@intotheprogram) on CodePen.

要素の文字列の並び替えができていますね。

最後に

文字列の並び替え方法には多様な実装例があると思いますが、Stack Overflowを眺めた感じだと、個人的には本記事でご紹介した並び替え方法が使いやすくて良かったです。ただ今後制作を続けていく中で他に良い方法が見つかるかもしれないので、その場合は本記事に追記して共有できればと思います。

以上、JavaScriptで要素の文字列を取得してランダムに並び替える方法のご紹介でした！