计算特殊字符2次和其他字符1次

Question

我想在textarea上放一个计数器来计算两次特殊字符，其他字符在按键后1次计算。

这是我到目前为止所做的代码：

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。