文字数を数える際に空白、改行をカウントしない方法

解決済

質問者：comomo0617
質問日時：2008/06/29 20:49
回答数：5件

こんばんは。
ど素人なのですが、テキストエリアの文字数をカウント
したいと思い、さまざまなサイトを参考に作成しましたが、
スペース等の空白と改行をどうしても文字数として
カウントしているのしか見つけられませんでした。
純粋に文字数だけをカウントさせるにはどのように
すればよいのでしょうか。ちなみにこんな感じになっています。
こちらもいろいろ過去ログを調べてみたのですが
やはりわかりませんでしたので、どうか宜しくお願い致します。

<SCRIPT Language="JavaScript">


</SCRIPT>

<CENTER><B><FONT SIZE="4" COLOR="tan" FACE="MS UI Gothic">入力フォーム</FONT></B><BR>
</CENTER>

<CENTER>
<FORM name="user">
<TEXTAREA name="comment" wrap="physical" cols=100 rows=50>文字数をチェックして見て下さい。</TEXTAREA><P>
<INPUT type="button" value="文字数チェック" onClick="Check()">
<INPUT type="text" name="counter" size=3 maxlength=3>字</P>
</FORM>
</CENTER>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

No.1

回答者： oka5130
回答日時：2008/06/29 21:22

ネスケには対応できませんが…。

var Num = 0;
var ch;
for( var i = 0; i < document.user.comment.value.length; i++ ) {
ch = document.user.comment.value.charAt( i );
if( ch != ' ' && ch != '\n' ) {
Num++;
}
}

動作確認していないので、ちゃんと動かなかったらすみません。

- 0
- 件

通報する

No.2

回答者： 15mm
回答日時：2008/06/29 21:37

document.user.counter.value.split(/\s/).join("")

スペースや改行で文字列を区切り、連結することで、
純粋に文字だけの状態に加工した文字列を返してくれるはずです。
この文字数をお作りになったスクリプトでカウントしてあげればどうでしょう。

ちなみにこのままだと全角スペースには対応できてませんので、
正規表現の部分（/\s/）を適宜変えてください。　　/\s|　/　など
好きな文字をカウントから外すことができます。

かなり無理やりなような気がしますができないことは無いでしょう。

- 0
- 件

通報する

この回答へのお礼

すばやい回答ありがとうございます。
試してみたのですが、だめでした。。
やり方がよくわかってない為だと思います。
せっかく丁寧に教えてくださったのに申し訳ありません。。

通報する

お礼日時：2008/06/29 23:15

No.3

回答者： auty
回答日時：2008/06/29 21:46

・　スペース等の空白と改行を見つけるには、正規表現を利用します。

var ss2 = ss.replace(/\s/g,"");

の場合、
/\s/
が、スペース等の空白と改行とマッチして、""に置き換えています。

以下のコードを参考にしてみてください。
------------------------------------------------------------

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript">

function check(ta) {
var ss = ta.value;
var ss2 = ss.replace(/\s/g,"");
alert(ss2.length);
}

</script>
<head>

<body>
<h2>メッセージの値を変更してみてください。</h2>
<form method="post">
<table border=1>
<tr>
<td>メールアドレス</td>
<td><input type=text name=email size=20></td>
</tr>
<tr>
<td>メッセージ</td>
<td><textarea name=msg rows=5 cols=40 onchange="check(this)"></textarea></td>
</tr>
<tr>
<td>お名前</td>
<td><input type=text name=name size=20></td>
</tr>
</table>
</form>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

早速の回答ありがとうございます。

しかし、このソースで試してみたのですが、
文字化けの様になってしまい確認できませんでした。。
おそらく私が何か変な事をしているのでしょうが。
せっかく詳しく書いてくださったのに申し訳ありません。
ありがとうございました。

通報する

お礼日時：2008/06/29 23:12

No.4

回答者： auty
回答日時：2008/06/29 23:40

・　文字コードを

　　charset=utf-8
　　で指定していますので、HTMLファイルを
　　utf-8
　　で保存するか、この部分を書き直してみてください。

- 0
- 件

通報する

No.5ベストアンサー

回答者： _pipi_
回答日時：2008/06/30 10:52

<html>

<body style="text-align:center">
<div style="font:bold 14pt 'MS UI Gothic'; color:tan">
入力フォーム
</div>
<FORM name="user">
<TEXTAREA name="comment" wrap="physical" cols="100" rows="50" onKeyup="
o=document.getElementById('slen');
n=this.value.replace(/\s|　/gm,'').length;
o.value=n;
o.innerHTML=n;
o.style.color=(n>100)?'red':'tan';
document.getElementById('mes').innerHTML=(n>100)?'字　文字制限を越えました':'字';
document.getElementById('mes2').innerHTML=(n>100)?'':'　あと、'+(100-n)+'文字です。';
">
100文字以内で！
</TEXTAREA><br/>
<span id="slen" style="border:1px solid #9ab;width:3em">
</span>
<span id="mes">字</span>
<span id="mes2"></span>
</FORM>
</body>
</html>