文字数カウンタを作りました

文字数を数えるプログラムをJavaScriptで作ったので解説していきます

今回のプログラムはこちらから動かすことができます

では解説していきます

まずはソースコード

<html lang="ja">
<head>
  <meta charset="utf-8"/>
  <title>文字数カウンター</title>
</head>
<body>
    <center><h1>文字数カウンター</h1></center>
    <center><div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px;">
        <p>下の枠内に文章を記入して「数える」ボタンを押してください</p><p>「クリア」ボタンでリセットすることができます</p>
</div></center>
    <center><strong><big><p>文字数(空白抜き) : <span id="span">0文字</span></p></big></strong></center>
    <center><strong><big><p>文字数(空白含む) : <span id="span2">0文字</span></p></big></strong></center>
    <center><strong><big><p>行数 : <span id="span3">0行</span></p></big></strong></center>
    <center><strong><big><p>空白数 : <span id="span4">0個</span></p></big></strong></center>
    <center><p><textarea id="textarea" value="1" cols="50" rows="10" maxlength="999999" placeholder="ここに文字を入力してください"></textarea></p></center>
    <center><input type="button" value="数える" onclick="clickBtn1()"/>
<input type="button" value="クリア" onclick="clickBtn2()"/></center>
<script>
    function checkWord(){
        str = document.getElementById("textarea").value;
        new_line = str.match(/\r\n|\n/g);
        s = str.match(/\s/g);
        nospace = str.match(/\S/g);
        if (s!=null) {
        s_num = s.length+1;
    }else{
        s_num = 0;
    }
        if (new_line!=null) {
        line_num = new_line.length + 1; 
    }else{
        line_num = 1;
    }   
        nospace_lengh = nospace.length;
        space_num = s_num - line_num;
 　　　　if(space_num < 0){
        space_num = 0;
    }
    }
    function resetWord(){
        document.getElementById("span").textContent = "0文字";
        document.getElementById("span2").textContent = "0文字";
        document.getElementById("span3").textContent = "0行";
        document.getElementById("span4").textContent = "0個";
    textarea.value = "";
    }
    function clickBtn1(){
    checkWord();
    document.getElementById("span").textContent = nospace_lengh+"文字";
    document.getElementById("span2").textContent = (nospace_lengh+space_num)+"文字";
    document.getElementById("span3").textContent = line_num+"行";
    document.getElementById("span4").textContent = space_num+"個";
    }
    function clickBtn2(){
	resetWord();
    }
</script>
</body>
</html>

<head>

<title>文字数カウンター</title>

</head>

<body>

<center><h1>文字数カウンター</h1></center>

<p>下の枠内に文章を記入して「数える」ボタンを押してください</p><p>「クリア」ボタンでリセットすることができます</p>

</div></center>

function checkWord(){

str = document.getElementById("textarea").value;

new_line = str.match(/\r\n|\n/g);

s = str.match(/\s/g);

nospace = str.match(/\S/g);

if (s!=null) {

s_num = s.length+1;

}else{

s_num = 0;

}

if (new_line!=null) {

line_num = new_line.length + 1;

}else{

line_num = 1;

}

nospace_lengh = nospace.length;

space_num = s_num - line_num;

　　　　if(space_num < 0){

space_num = 0;

}

function resetWord(){

document.getElementById("span").textContent = "0文字";

document.getElementById("span2").textContent = "0文字";

document.getElementById("span3").textContent = "0行";

document.getElementById("span4").textContent = "0個";

textarea.value = "";

}

function clickBtn1(){

checkWord();

document.getElementById("span").textContent = nospace_lengh+"文字";

document.getElementById("span2").textContent = (nospace_lengh+space_num)+"文字";

document.getElementById("span3").textContent = line_num+"行";

document.getElementById("span4").textContent = space_num+"個";

}

function clickBtn2(){

resetWord();

}

</script>

</body>

</html>

17行目まではデザインなので説明を省きます

18行目からのcheckWord関数についての説明をします

20行目はテキストエリアの中に貼り付けられたある文章を読み取って変数strに代入C

21行目は文章内の改行コードがあるかどうかの判定

コンピュータ上での改行にはCRとLF、CRLFのように表現が複数存在します

Windows系のOSではCR＋LFが標準の改行コードとして使用されており、UNIX系のOSやMacOS XではLFが標準の改行コードとして使用されています

それぞれの正規表現は「\r\n」と「\n」なのでそれらの和集合を探索すればどちらのOSにも対応できます

バージョン9以前のMacOSではCRが標準の改行コードとして使用されていたらしく、それに対応したい場合はその正規表現「\r」も探索する必要があります

22行目は改行空白(スペース) タブがあるかどうかの判定(空白だけではないのが面倒なポイント)

23行目は改行空白(スペース) タブ以外の記号があるかどうかの判定、これが空白抜きの文字数になります

24-28行目は改行空白(スペース) タブの総数を算出

29-33行目は改行コードの総数を算出

34行目でnospace_lenghに文字数を代入

35行目は (改行空白(スペース) タブの総数) - (改行の数) でスペースの数を算出

36-38行目は矛盾をなくすための処理を記述してます

改行コードがなくてもline_numの初期値を1にしているため、1行目で空白が0のときは改行コードなしになります

35行目が0 - 1 = -1になってしまうので、それを防ぐためのものです

残りの部分はリセットボタンで初期化するための処理を記述しています、文字を上書きしているだけなので説明は省きます

質問や指摘等ありましたらコメントよろしくお願いします

以上です、最後までお読みいただきありがとうございました

【無料】ゲームをやるだけで暗号資産のマイニングができる！RollerCoinを紹介

文字数カウンタを作りました