How to count characters in an textarea with some characters counting as double ? (javascript)

Question

I would like to count the characters of a textarea field but some characters like "é, è, €, ..." counting for two. I have this special need for sending SMS plateform and SMS are limited to 160 characters but some count as double.

I've found many solutions on Stackoverflow about counting characters but none with specific counting.

I'd like a Javascript (vanilla or JQuery) solution please.

Thank you !

Which characters should be counted as 2 characters? What's the logic? — adiga, Nov 21 '22 at 11:18
Possible duplicate of [SMS messages non ASCII characters encoding](https://stackoverflow.com/questions/7103990) and [Count characters/sms using jQuery](https://stackoverflow.com/questions/4705185) and [SMS Character Count](https://stackoverflow.com/questions/26038234) and [international Count sms characters](https://stackoverflow.com/questions/5454910) — adiga, Nov 21 '22 at 11:21

Rajeev Singh · Answer 1 · 2022-11-21T11:55:38.767

$(document).on('keyup','textarea',function() {
    var all_same_char_counts = {};
    var duplicate_characterCount = 0;

    var source = $(this).val();
    var splittedSource = source.trim().replace(/\s{2,}/g, ' ').split(' ');
               
   jQuery.each(splittedSource, function(key,value) {
       if (!all_same_char_counts.hasOwnProperty(value)) {
            all_same_char_counts[value] = 1;
       } else {
           all_same_char_counts[value]++;
       }
    });
    jQuery('#the-duplicate-char-count').html(JSON.stringify(all_same_char_counts));
    //console.log(all_same_char_counts);

                
    Object.keys(all_same_char_counts).forEach(function(key) {
        duplicate_characterCount = duplicate_characterCount+all_same_char_counts[key];
                    
   });
   //console.log(duplicate_characterCount);

<!-- All characters count  -->
                var characterCount = source.length,
                    current = $('#current'),
                    maximum = $('#maximum'),
                    theCount = $('#the-count');
                
                current.text(characterCount);
            
                /*This isn't entirely necessary, just playin around*/
                if (characterCount < 70) {
                    current.css('color', '#666');
                }
                if (characterCount > 70 && characterCount < 90) {
                    current.css('color', '#6d5555');
                }
                if (characterCount > 90 && characterCount < 100) {
                    current.css('color', '#793535');
                }
                if (characterCount > 100 && characterCount < 120) {
                    current.css('color', '#841c1c');
                }
                if (characterCount > 120 && characterCount < 139) {
                    current.css('color', '#8f0001');
                }
                
                if (characterCount >= 140) {
                    maximum.css('color', '#8f0001');
                    current.css('color', '#8f0001');
                    theCount.css('font-weight','bold');
                } else {
                    maximum.css('color','#666');
                    theCount.css('font-weight','normal');
                }       
            });

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700,300italic);
            *, *:before, *:after { box-sizing: border-box; }
            html { font-size: 100%;  }
            body { 
            font-family: 'Open Sans', sans-serif;
            font-size: 16px;
            background: #d0e6ef; 
            color: #666;
            }
            .wrapper {
            max-width: 75%;
            margin: auto;
            }
            h1 { 
            color: #555; 
            margin: 3rem 0 1rem 0; 
            padding: 0;
            font-size: 1.5rem;
            }
            textarea {
            width: 100%;
            min-height: 100px;
            resize: none;
            border-radius: 8px;
            border: 1px solid #ddd;
            padding: 0.5rem;
            color: #666;
            box-shadow: inset 0 0 0.25rem #ddd;
            }
            textarea:focus {
                outline: none;
                border: 1px solid darken(#ddd, 5%);
                box-shadow: inset 0 0 0.5rem darken(#ddd, 5%);
            }
            textarea[placeholder] { 
                font-style: italic;
                font-size: 0.875rem;
            }
            #the-count {
            float: right;
            padding: 0.1rem 0 0 0;
            font-size: 0.875rem;
            }
            #the-duplicate-char-count{
                font-weight: bold;
                color:brown
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
            <h1>Displaying The Character Count of a Textarea</h1>
            <textarea name="the-textarea" id="the-textarea" maxlength="300" placeholder="Start Typin..."autofocus></textarea>
            <div id="the-count">
                <span id="current">0</span>
                <span id="maximum">/ 300</span>
            </div>
            <div id="the-duplicate-char-count"></div>
        </div>

Now I have updated my answer so you can count all characters and also count all duplicate words so now you can update the rest of the scrip accordingly.

Thanks but it doesn't resolve my issue, the solution you share just count characters, there is not specific count for specific characters ! — Cypoun, Nov 21 '22 at 11:06
*"some characters like "é, è, €, ..." should be counted as two"* — adiga, Nov 21 '22 at 11:20
Now I have updated my answer so you can get all duplicate characters — Rajeev Singh, Nov 21 '22 at 11:51

How to count characters in an textarea with some characters counting as double ? (javascript)

1 Answers1