inoskheのブログ

チラシの裏にでも書くよう

JavaScriptで文字列並び替え

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset="utf-8">
    <title>ShuffleString</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">

      function shuffle(str) {
        var result = [];
        var ary = str.split("");
        var l = ary.length;
        for (var i = 0; i < l; i++) {
          var random = Math.floor(Math.random()*ary.length);
          result.push(ary[random]);
          ary.splice(random,1);
        }
        return result.join("");
      }

      $(function() {
        $('#shuffleBtn').click(function(){
          var inStr = $('#inStr').val();
          $('#inStr').val(shuffle(inStr));
        });
      });
    </script>
  </head>
  <body>
    <h1>文字列並び替え</h1>
    <p>好きな文字列を入力して、シャッフルボタンを押してみましょう!</p>
    <input id="inStr" type="text" value="ここに入力しましょう!">
    <input id ="shuffleBtn" type="button" value="シャッフル">
  </body>
</html>

ProgateでHTML/CSS/JS/jQueryをさらさらとやってみたので、試しに何か書いてみた。ネーミングのときにローマ字を並び替えることが多いので、それをランダムに行うやつ。つまり、文字を並び替えるだけ。

入力した文字列を1文字ずつ配列にする(splitメソッド)。「ランダムに選んだ要素をランダムな位置にぶち込み(pushメソッド)、要素を消す(spliceメソッド)」という処理を配列の要素数(文字数)分、繰り返す。 並び替えた配列を文字列にする(joinメソッド)。