ここから本文です

文字数とカウントするWEBアプリを作ったのですが、例えば100文字以上になるとはみ...

アバター

ID非公開さん

2018/2/1123:58:45

文字数とカウントするWEBアプリを作ったのですが、例えば100文字以上になるとはみ出た文字だけ色を変えるという事はブラウザ上で可能でしょうか

文字数がはみでたよと伝えたいです。

タイトルなどの文字数チェックに使いたいのですが、恐らくスニペット含んで半角は1文字ではないですよね。
すると半角を半分として計算しないといけないのですが可能なのでしょうか?

閲覧数:
107
回答数:
1

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

oishii_mahouさん

2018/2/1202:08:39

>文字数とカウントするWEBアプリを作ったのですが、例えば100文字以上になるとはみ出た文字だけ色を変えるという事はブラウザ上で可能でしょうか

可能。
正規表現で、
半角文字に対応する16進数文字コードの範囲を使えば、
半角文字を判別できる。

1文字ずつ文字数をカウントしていくときに、
半角文字かどうかを判別し、
半角文字の場合はカウントに 0.5 を、
全角文字の場合はカウントに 1 を足していく。
それで、
制限文字数を超えた位置から後方の文字列を切り離し、
<span style="color:red">~</span> で囲って色を変えればいい。

━━━━━━━━━━━━━━━━
<body>

<h1>01あ2いう3え4おかきく5678けこ9</h1>
<script>

/*= 半角文字を判別する正規表現 =*/
var reg = /[\x01-\x7E\uFF65-\uFF9F]/;

/*= 各種変数 =*/
var h1 = document.querySelector( "h1" ); // <h1> 要素
var text = h1.textContent; // <h1> 要素内の文字列
var count = 0; // 文字数カウント
var limit = 10; // 制限文字数
var overflow = new String(); // はみ出した文字列を入れる変数

/*= 文字数をカウント =*/
for(var i=0;i<text.length;i++){
// 半角なら +0.5、全角なら +1
count += reg.test( text.charAt( i ) ) ? 0.5 : 1 ;
// 制限文字数を超えた場合
if( count>limit ){
overflow = text.slice( i );
text = text.slice( 0, i );
break;
}
}
// 制限文字数をはみ出した場合
if( overflow ){
text = text + "<span style='color:red'>"+overflow+"</span>"
}
// <h1> のテキストを更新(はみ出していたら色が変わる)
h1.innerHTML = ( text );

</script>

</body>
━━━━━━━━━━━━━━━━

  • アバター

    質問者

    ID非公開さん

    2018/2/1215:26:42

    ありがとうございます。
    確かに出力された文字列の色を変換することができました。
    ただこれは使用上不可能だと思いますが、色を変えられるのはtextareaないの文字列ではなく、
    その出力された文字列限定のようですね。
    これは仕様なんでしょうからしょうがないですね。
    textareaの下にリアルタイムで文字列を出して、その色味を変えるようにします。


    >>>
    /*= 半角文字を判別する正規表現 =*/
    var reg = /[\x01-\x7E\uFF65-\uFF9F]/;

    難しいのでよくわかりませんが、恐らくaからzと何とかと
    という風に半角の文字をすべて変数に入れているのでしょうね。
    円マークがとという意味でしょうか?


    >>>
    var text = h1.textContent; // <h1> 要素内の文字列

    textContetはinnerHtmlとほぼ同じ関数で、確か対象の要素に文字列などを代入するものだったと思うのですが、
    これはh1タグの文字列を取得していますよね。
    valueではないのでしょうか?



  • その他の返信を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

この回答は投票によってベストアンサーに選ばれました!

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる