特別なキャラクタを数える2時間と他のキャラクタ1時間

Question

私は、特殊文字を2回カウントするためにカウンタをテキストエリアに配置したいと考えています。

これは私がこれまで行っているコードです：

function count_up(obj) { 
 

 
    var count = obj.value.length; 
 
    document.getElementById('count1').innerHTML = count; 
 
}

<form> 
 
    <div class="form-group"> 
 
    <label>Count Up</label> 
 
    <textarea class="form-control" rows="5" onkeyup="count_up(this);" maxlength="20"></textarea> 
 
    <span class="text-muted pull-right" id="count1">0</span> 
 
    </div> 
 
    <br><br> 
 

 
</form>

Answer 1

をあなたは非特別の数と特殊文字の数をカウントする必要があります。

このような何か：

function count_up(obj) { 
 

 
    //Matches characters that are not A-Z or 0-9 
 
    var countSpecial = (obj.value.match(/[^a-zA-Z0-9]/g) || []).length * 2; 
 
    //Matches characters that are A-Z or 0-9 (because of the^symbol) 
 
    var count = (obj.value.match(/[a-zA-Z0-9]/g) || []).length; 
 
    document.getElementById('count1').innerHTML = count + countSpecial; 
 
}

<form> 
 
    <div class="form-group"> 
 
    <label>Count Up</label> 
 
    <textarea class="form-control" rows="5" onkeyup="count_up(this);" maxlength="20"></textarea> 
 
    <span class="text-muted pull-right" id="count1">0</span> 
 
    </div> 
 
    <br><br> 
 

 
</form>

Answer 2

それとも、あなたは、単に英数字をカウントし、合計からそれを引くことができ - その本当に簡単に、あなたが実際の文字列を必要とすることを定めたことがありませんカウント。

document.querySelector("#count-this").addEventListener("keyup", count_up); 
 

 
function count_up(evt) { 
 
    var obj = evt.target; 
 
    var text = obj.value; 
 
    var alphaNumeric = text.replace(/[\W_]+/gmi, ""); 
 
    var specialCount = text.length - alphaNumeric.length; 
 
    var count = alphaNumeric.length; 
 
    // console.log(text + ", " + alphaNumeric); 
 
    document.querySelector('.alphanumeric-count .counter').innerHTML = count; 
 
    document.querySelector('.non-alphanumeric-count .counter').innerHTML = specialCount; 
 
}

<form> 
 
    <div class="form-group"> 
 
    <label>Count Up</label> 
 
    <textarea class="form-control" rows="5" id="count-this" maxlength="20"></textarea> 
 
    </div> 
 
    <div class="results"> 
 
    <div class="alphanumeric-count"> 
 
     Alphanumeric: <span class="text-muted pull-right counter" >0</span> 
 
    </div> 
 
    <div class="non-alphanumeric-count"> 
 
     Special: <span class="text-muted pull-right counter" >0</span> 
 
    </div> 
 

 
    </div> 
 
</form>

またはお好みであれば、ここではas a fiddleです。