サイトマップ

JavaScriptツール作成キット

変換ボタンを押した時に動作するJavaScriptをコピーペーストで作れるキットです。変換、挿入、カウント、計算などができます。正確なJavaScriptの書き方については【JavaScriptリファレンス - MDN】などをご覧ください。

もくじ

  • 表示例
  • 基本となるコード
  • 変換
  • 挿入
  • 文字数を数える
  • 行の数を数える
  • 倍数計算
  • 累乗計算
  • 全角数字→半角数字
  • ランダムな数字
  • ランダムな数字(複数)
  • ランダムな英数字
  • ランダムな英数字(複数)
  • 文字シャッフル
  • ランダムなおみくじ
  • ブラウザ画面サイズ
  • リアルタイム時計
  • ファイル読み込む
  • 配列に｢,｣(ｶﾝﾏ)を加える
  • ボタン押す度に数が増える
  • 作成したツールの例

表示例

  • ＡをＢに変換(置換)する
  • 表示例を見る

基本となるコード

  • HTML+JavaScript
    • <!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><title></title></head><body>
    • <script>
    • window.onload = function() {
    • // ** ボタンクリック時に実行
    • const clickBtn = document.getElementById("clickBtn");
    • clickBtn.addEventListener("click", event => {
    • // ** 取得→id="input"の内容
    • let input = document.getElementById("input").value;
    • // ** ここにコードを書く
    • // 📄📄📄📄📄
    • // 📄📄📄📄📄
    • // 📄📄📄📄📄
    • // ** 出力→id="output"
    • document.getElementById("output").value = input;
    • });
    • };
    • </script>
    • <div><textarea id="input" rows="10" cols="100"></textarea></div>
    • <div><input id="clickBtn" type="button" value="変換ボタン"></div>
    • <div><textarea id="output" rows="10" cols="100"></textarea></div>
    • </body></html>
  • CSS
  • https://text.sakura.ne.jp/search/result/8999550.css

変換

  • ◆を▲に変換(置換)する
    • input = input.replace(/◆/gim, "▲");
  • [例] ▲

挿入

  • 入力した文字をタグの中に挿入する
    • input = input.replace(/(.+)/gim, "<b>$1</b>");
  • [例] <b>aaaaa</b>

文字数を数える

  • 文字を数える
    • input = input.length;
  • [例] 1

行の数を数える

  • 改行(\n)を数える
    • input = input.split(/\n/).length;
  • [例] 1

倍数計算

  • １倍から10倍まで計算
    • input = [input];
    • for (var i=2; i<=10; ++i){input.push(input[0]*i);}
  • [例] 2,4,6,8,10,12,14,16,18,20

累乗計算

  • １乗から10乗まで計算
    • input = [input];
    • for (var i=2; i<=10; ++i){input.push(input[0]**i);}
  • [例] 2,4,8,16,32,64,128,256,512,1024

全角数字→半角数字

    • input = input.replace(/[０-９]/g,num => String.fromCharCode(num.charCodeAt(0)-65248));
  • [例] 1

ランダムな数字

    • // ** 作成→ランダムな数字
    • function getRandomIntInclusive(min,max) {return Math.floor(Math.random()*(Math.floor(max)-Math.ceil(min)+1)+Math.ceil(min));}
    • // ** 設定→ランダムな数字の範囲を指定
    • input = getRandomIntInclusive(0,9);
  • [例] 5

ランダムな数字(複数)

    • // ** 作成→ランダムな数字
    • function getRandomIntInclusive(min,max) {return Math.floor(Math.random()*(Math.floor(max)-Math.ceil(min)+1)+Math.ceil(min));}
    • // ** 準備→配列
    • input = [];
    • // ** 繰り返す(５回)
    • // ** 設定→ランダムな数字の範囲を指定
    • for (var i=1; i<=5; ++i){
    • input.push(getRandomIntInclusive(1,20));
    • }
  • [例] 6,11,12,9,1

ランダムな英数字

    • // ** 作成→ランダムな数字
    • function getRandomIntInclusive(min,max) {return Math.floor(Math.random()*(Math.floor(max)-Math.ceil(min)+1)+Math.ceil(min));}
    • // ** 作成→配列の要素
    • input = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
    • // ** 選択→配列からランダムで１つ選ぶ
    • input = input[getRandomIntInclusive(0,input.length-1)];
  • [例] N

ランダムな英数字(複数)

    • // ** 作成→ランダムな数字
    • function getRandomIntInclusive(min,max) {return Math.floor(Math.random()*(Math.floor(max)-Math.ceil(min)+1)+Math.ceil(min));}
    • // ** 作成→配列の要素
    • input = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
    • // ** ﾙｰﾌﾟ→配列からランダムで１つ選び、配列の後方に追加
    • for (var i=0; i<15; ++i){
    • input.push(input[getRandomIntInclusive(0,input.length-1-i)]);
    • }
    • // ** 削除→後方に追加した要素だけ残す
    • input.splice(0, input.length-i);
  • [例] 4,V,t,s,y,K,X,7,v,z,b,K,3,m,A
    • ①配列の中に使いたい文字を入れる
    • ["A","B","C","D","E"]
    • ②上記の配列から要素をランダムで５つ選び、配列の後方に追加
    • ["A","B","C","D","E","D","A","A","C","B"]
    • ③最初の配列の部分を削除
    • ["D","A","A","C","B"]
    • ④ランダムで選ばれた文字だけが残る

文字シャッフル

    • // ** 準備→後で使う
    • let input_length = '';let result = '';
    • // ** 作成→ランダムな数字
    • function getRandomIntInclusive(min,max) {return Math.floor(Math.random()*(Math.floor(max)-Math.ceil(min)+1)+Math.ceil(min));}
    • // ** 作成→シャッフルしたい文字
    • input = ["あ","い","う","え","お"];
    • // ** ｶｳﾝﾄ→文字数
    • input_length = input.length;
    • // ** 連続→ランダムに１文字ずつ抽出
    • for (var i=0; i<=input_length; ++i){
    • result += input.splice(getRandomIntInclusive(1,input.length)-i, 1);
    • }
    • // ** 作成→配列
    • input = [...result];
  • [例] い,お,え,う,あ

ランダムなおみくじ

    • // ** 作成→結果として表示する項目の候補
    • let uranai = ["大吉","吉","中吉","小吉","末吉","凶","小凶","中凶","大凶"];
    • // ** 作成→ランダムな数字
    • function getRandomIntInclusive(min,max) {return Math.floor(Math.random()*(Math.floor(max)-Math.ceil(min)+1)+Math.ceil(min));}
    • // ** 設定→ランダムな数字の範囲(12345でなく01234なので、上限数は項目の候補数より1減らす)
    • input = getRandomIntInclusive(0,uranai.length-1);
    • // ** 抽出→候補の中からランダムな数字に該当する項目を抽出する(0は大吉)
    • input = uranai[input];
  • [例] 大吉

ブラウザ画面サイズ

    • input = '(横幅)'+window.innerWidth+'(縦幅)'+window.innerHeight;
  • [例] (横幅)1024(縦幅)768

リアルタイム時計

    • <script>
    • window.onload = function() {
    • // ** リアルタイムで動かす
    • setInterval(function(){
    • // ** 現在の時間を読み込む
    • let input = new Date();
    • // ** 出力→id="output"
    • document.getElementById("output").value = input;
    • // ** 更新→250ミリ秒ごとに更新
    • },250);
    • };
    • </script>
  • [例] Mon Jan 01 2020 00:00:00 GMT+0900 (日本標準時)

ファイル読み込む

    • let FileRead = new XMLHttpRequest();
    • FileRead.open("GET", "https://～～～.txt");
    • FileRead.send();
    • FileRead.addEventListener("load", function() {
    • // ** 格納→上記で読み込んだテキストファイルの内容
    • input = FileRead.responseText;
    • // ** 出力→id="output"
    • document.getElementById("output").value = input;
    • });
  • [例] テキストファイルの内容が表示されます。
  • 取得したRSSをHTMLリンクに変換
    • // ** 抽出→<title>と<link>を残し、他は削除
    • input = input.replace(/^(?!\<title\>|\<link\>).*$/gim, "").replace(/^\n|\r\n|\r/gim, "").replace(/(\<\/link\>)/gim, "$1\n");
    • // ** 置換→リンクタグ<a>に置換
    • input = input.replace(/\<title\>(.*)(?=\<\/title\>)\<\/title\>\<link\>(.*)(?=\<\/link\>)\<\/link\>/gim, '<div><a href="$2">$1</a></div>');
  • [例] <div><a href="記事のURL">記事のタイトル</a></div>
    • コンテンツセキュリティポリシーの設定が必要になることがあります。
    • Header set Content-Security-Policy "connect-src 'self';"
    • コンテンツセキュリティポリシー(CSP)：MDN

配列に｢,｣(ｶﾝﾏ)を加える

    • input = [...input];
  • [例] あ,い,う,え,お,か,き,く,け,こ

ボタン押す度に数が増える

    • // ** 設定→0からカウント始める
    • input = 0;
    • // ** ボタンクリック時に実行
    • const clickBtn = document.getElementById("clickBtn");
    • clickBtn.addEventListener("click", event => {
    • // ** ｶｳﾝﾄ→ボタン押す度に数が増える
    • input += 1;
    • // ** 出力→id="output"
    • document.getElementById("output").value = input;
    • });
  • [例] 2

作成したツールの例

  • WEBツール
フィードバック
ページトップに戻る
利用規約･免責事項･プライバシーポリシーサイトマップ記事タグ一覧最近更新されたページ
© text.sakura.ne.jp
ページトップに戻る