2020-06-28

javascript：パスワード生成

パスワードを生成するＷｅｂアプリを作りました。

パスワード生成

◆ html
  1. <!DOCTYPE html> 
  2. <html>
  3. <head> 
  4. <meta charset=UTF-8">
  5. <title>パスワード生成</title> 
  6. <link rel=icon href="../../_img/BlueSky_favicon.png" sizes="16x16" type="image/png">
  7. <link rel="stylesheet" type="text/css" href="http://s10-4bn.sunnyday.jp/_css/reset.css">
  8. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  9.  
  10. <script type="text/javascript">
  11.   $(function() {
  12.     let password = "";
  13.     for (let i=0; i<100; i++) {
  14.       password = createPass();
  15.       if(password.match(/^(?=.*?[a-z])(?=.*?\d)[a-z\d]{8,100}$/i)){
  16.         // [a-z\d]{8,100} 英字大小関わらずaからz、または、0から9の文字中で8字以上100字以下の連続
  17.         // (?=.*?[a-z])(?=.*?\d) 任意の0回以上の文字列.*?とaからzの1文字[a-z]を条件とした任意の位置の先頭位置(?= )、
  18.         //                       かつ、任意の0回以上の文字列.*?と数字1文字\dを条件とした任意の先頭位置(?= )
  19.         break;
  20.       }
  21.     }
  22.  
  23.     $("h2").text(password);
  24.     $('#copybtn').on('click', function(){
  25.       // コピーする文章の取得
  26.       let text = $('#pass').text();
  27.       // テキストエリアの作成
  28.       let $textarea = $('<textarea></textarea>');
  29.       // テキストエリアに文章を挿入
  30.       $textarea.text(text);
  31.       //　テキストエリアを挿入
  32.       $(this).append($textarea);
  33.       //　テキストエリアを選択
  34.       $textarea.select();
  35.       // コピー
  36.       document.execCommand('copy');
  37.       // テキストエリアの削除
  38.       $textarea.remove();
  39.       // アラート文の表示
  40.       $('#js-copyalert').show().delay(2000).fadeOut(400);
  41.     });
  42.  
  43.     function createPass() {
  44.       let password_base = '2346789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRTUVWXYZ';
  45.       let length = 10;
  46.       let password = '';
  47.       for (let i = 0; i < length; i++) {
  48.         password += password_base.charAt(Math.floor(Math.random() * password_base.length));
  49.       }
  50.       console.log(password);
  51.       return password;
  52.     }
  53.  
  54.   });
  55.  
  56. </script> 
  57.  
  58. <style type="text/css">
  59. h1 { 
  60.   margin: 2rem;
  61.   font-size: 2rem;
  62. }
  63. h2 { 
  64.   margin: 1.5rem;
  65.   font-size: 1.5rem;
  66. }
  67. button { 
  68.   margin: 1rem;
  69. }
  70. </style>
  71.  
  72. </head> 
  73.  
  74. <body> 
  75.   <div style="text-align: center;">
  76.   <h1>パスワード生成</h1>
  77.   <h2 id="pass">></h2>
  78.   <button type="button" id="copybtn">copy</button>
  79.   <p id="js-copyalert" class="copy_alert" style="display: none;">copied</p>
  80.   </div>
  81. </body> 
  82.  
  83. </html>

参考：
【jQuery】テキストをクリップボードにコピーする方法【コピペOK】
Javascriptでランダムなパスワードを生成する
パスワード向け正規表現 /^(?=.*?[a-z])(?=.*?\d)[a-z\d]{8,100}$/i を解読する


以上
投稿者 時刻:
ラベル: