How to compare value in JavaScript when keyup

Question

I try to compare two string first ASCII (English) and second Unicode (Chinese). User need to type message in textarea and JavaScript will calculate how long the text and show some message.

Now its working only for ASCII (English) but I need to compare because condition for ASCII and Unicode is different.

Below is my current code snippet:

<script>

$('#myinput').keyup(function() {
    if(this.value.length<=152)
     $('#charcount').text('We will deduct 1 credit for this message per contact'), 
     $('#credit_value').val('1');
    else if(this.value.length>152 && this.value.length<298)
         $('#charcount').text('We will deduct 2 credit for this message per contact'),  
         $('#credit_value').val('2');
    else if (this.value.length>=298 && this.value.length<450)
        $('#charcount').text('We will deduct 3 credit for this message per contact'),
        $('#credit_value').val('3');
    else if (this.value.length>=450 && this.value.length<596)
        $('#charcount').text('We will deduct 4 credit for this message per contact'),   
        $('#credit_value').val('4');
    else if (this.value.length>=602 && this.value.length<754)
        $('#charcount').text('We will deduct 5 credit for this message per contact'),  
        $('#credit_value').val('5');
    })
</script>

For ASCII (English) I start with 152 but in Unicode (Chinese) I need to start with 60 and increase ...

Below is the code that I'm using in PHP to check text/string in English or Chinese:

// check if message is type in chinese or english/UTF8
    if (preg_match("/\p{Han}+/u", $message)) {
        $msg_type = '2';
        //this is chinese
    } else {
        $msg_type = '1';
        //this is UTF8/English
    }

So my problem now I need to check the string is type in ASCII or Unicode then if Chinese start condition value with 60 or if English start with 152.

Check my jsfiddle here.

Do you want to recognize only Chinese or all non-ascii chars? — Bergi
– Bergi, Commented Mar 26, 2013 at 15:06
i want to recognize both if Chinese use condition for chinese and if english/ASCII use their own condition... — rusly
– rusly, Commented Mar 26, 2013 at 15:09
And what should happen if you encounter a unicode character that is neither Chinese nor ASCII? — Bergi
– Bergi, Commented Mar 26, 2013 at 15:11
this textbox only allow standard english and chinese.. other than that maybe should echo some error message.. — rusly
– rusly, Commented Mar 26, 2013 at 15:13
@rusly Just for my knowledge, why Chinese Unicode characters are limited to 60 per message? isn't the byte length of them is 3? — Salman
– Salman, Commented Mar 26, 2013 at 15:39

Community · Accepted Answer · 2017-05-23 10:32:04Z

3

Taken from this Answer

The following regex [^\x00-\x80]+ can be used to test for non ASCII characters. ([^\u0000-\u0080]+ for non Unicode Chars)

I assumed you want to match against non ASCII characters, that wasn't made clear in your question

Update: If you want to match only Chinese Characters use this instead

var isChinese = /[\u4E00-\u9FFF\u6300-\u77FF\u7800-\u8CFF\u8D00-\u9FFF]+/

Given this you can just test the RegExp against the Text and display the according Message

I slimmed the code a little for demo simplicities sake, it only accounts for steps of 60/152

    var charCount = $('#charcount')
    $('#myinput').keyup(function () {
        var text = this.value;
        var isChinese = /[^\x00-\x80]+/
        var step = isChinese.test(text) ? 60 : 152;
        charCount.text('We will deduct '+ ~~(1 + ((text.length - 1) / step)) +' credit for this message per contact. Characters: '+text.length);
    })

Heres a Demo on JSFiddle

Update

So i changed it a little, to display an Error for non Chinese Unicode Characters. And let you define custom ranges

var charCount = $('#charcount');
$('#myinput').keyup(function () {
    var text = this.value;
    var isChinese = /[\u4E00-\u9FFF\u6300-\u77FF\u7800-\u8CFF\u8D00-\u9FFF]+/.test(text);
    if (!isChinese && (/[^\x00-\x80]+/.test(text))) {
        charCount.text("Error: Neither ASCII nor Chinese Unicode Character Entered");
        return;
    }
    var credits = {
        chinese: [
            [1, 60],
            [60, 130],
            [130, 190]
        ],
        english: [
            [1, 152],
            [152, 298],
            [298, 450],
            [450, 596],
            [602, 754]
        ]
    };
    var _credits = credits[isChinese ? "chinese" : "english"];
    var i;
    for (i = _credits.length; i > 1; i--) {
        if (text.length >= _credits[i - 1][0] && text.length < _credits[i - 1][1]) break;
    }
    charCount.text('We will deduct ' + i + ' credit for this message per contact. Characters: ' + text.length);
});

Heres another Fiddle for you

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Mar 26, 2013 at 15:23

Moritz Roessler

8,67329 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rusly Over a year ago

thanks @C5H8NNaO4 its working, but i not sure how to add more condition like if more than 298 (3 credit) , 450 (4 credit) and so on..

Moritz Roessler Over a year ago

does the amount increase in the same steps ?

Collectives™ on Stack Overflow

How to compare value in JavaScript when keyup

1 Answer 1

Update

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related