jquery: 计数字符，给一些标签不同的计数

Question

我有计算文本区域中字符数的代码，任何字符，space，无论什么都算作“1”。这很好用。但是我想以不同的方式计算一些字符串：

字母，字符，space = 1 个字符
  = 1 个字符
<li> = 3 个字符
<br> 或 <br/> = 50 个字符
<ol>, </ol>, <ul>, </ul>, </li> = 0 个字符

这是正常的 1 as 1 代码：

   <textarea id="field" onkeyup="countChar(this)"></textarea>
    <div id="charNum"></div>

$('#field').keyup(function () {
  var max = 100;
  var len = $(this).val().length;
  if (len >= max) {
    $('#charNum').text(' that\'s the limit');
  } else {
    var char = max - len;
    $('#charNum').text(char + ' characters left');
  }
});

此处的剪辑编辑器有效（但给了我很多错误）：https://jsfiddle.net/yello/bq7rez9t/

我不清楚该怎么做，我隐约认为length是关键。所以我模糊地相信我可以只计算所有字符，然后为每个   减去 5，为 <br> 加 46，依此类推。

Answer 1

你的想法奏效了。使用正则表达式计算特殊情况并乘以差异。

$('#field').keyup(function () {
  var max = 100;
  var txt = $(this).val();
  var len = txt.length;
  var cnt=txt.match(/<li>/g); // <li>
  len-=cnt?cnt.length:0;
  cnt=txt.match(/<(u|o)l>/g); // <ul> and <ol>
  len-=cnt?cnt.length*4:0;
  cnt=txt.match(/(<\/((u|o)l|li)>|&nbsp;)/g); // </ul>, </ol>, </li> and &nbsp;
  len-=cnt?cnt.length*5:0;
  cnt=txt.match(/<br\/>/g); // <br/>
  len+=cnt?cnt.length*45:0;
  cnt=txt.match(/<br>/g); // <br>
  len+=cnt?cnt.length*46:0;
  if (len >= max) {
    $('#charNum').text(' that\'s the limit');
  } else {
    var char = max - len;
    $('#charNum').text(char + ' characters left');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="field"></textarea>
   <div id="charNum"></div>

jquery: 计数字符，给一些标签不同的计数

jquery: Count characters, give different count to some tags

jquery

counting