パスワード生成
◆ html
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title>パスワード生成</title>
<link rel=icon href="../../_img/BlueSky_favicon.png" sizes="16x16" type="image/png">
<link rel="stylesheet" type="text/css" href="http://s10-4bn.sunnyday.jp/_css/reset.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
let password = "";
for (let i=0; i<100; i++) {
password = createPass();
if(password.match(/^(?=.*?[a-z])(?=.*?\d)[a-z\d]{8,100}$/i)){
// [a-z\d]{8,100} 英字大小関わらずaからz、または、0から9の文字中で8字以上100字以下の連続
// (?=.*?[a-z])(?=.*?\d) 任意の0回以上の文字列.*?とaからzの1文字[a-z]を条件とした任意の位置の先頭位置(?= )、
// かつ、任意の0回以上の文字列.*?と数字1文字\dを条件とした任意の先頭位置(?= )
break;
}
}
$("h2").text(password);
$('#copybtn').on('click', function(){
// コピーする文章の取得
let text = $('#pass').text();
// テキストエリアの作成
let $textarea = $('<textarea></textarea>');
// テキストエリアに文章を挿入
$textarea.text(text);
// テキストエリアを挿入
$(this).append($textarea);
// テキストエリアを選択
$textarea.select();
// コピー
document.execCommand('copy');
// テキストエリアの削除
$textarea.remove();
// アラート文の表示
$('#js-copyalert').show().delay(2000).fadeOut(400);
});
function createPass() {
let password_base = '2346789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRTUVWXYZ';
let length = 10;
let password = '';
for (let i = 0; i < length; i++) {
password += password_base.charAt(Math.floor(Math.random() * password_base.length));
}
console.log(password);
return password;
}
});
</script>
<style type="text/css">
h1 {
margin: 2rem;
font-size: 2rem;
}
h2 {
margin: 1.5rem;
font-size: 1.5rem;
}
button {
margin: 1rem;
}
</style>
</head>
<body>
<div style="text-align: center;">
<h1>パスワード生成</h1>
<h2 id="pass">></h2>
<button type="button" id="copybtn">copy</button>
<p id="js-copyalert" class="copy_alert" style="display: none;">copied</p>
</div>
</body>
</html>
参考：
【jQuery】テキストをクリップボードにコピーする方法【コピペOK】
Javascriptでランダムなパスワードを生成する
パスワード向け正規表現 /^(?=.*?[a-z])(?=.*?\d)[a-z\d]{8,100}$/i を解読する
以上
