JQuery: подсчет символов, дать различное количество для некоторых тегов - PullRequest
Новая
       8

JQuery: подсчет символов, дать различное количество для некоторых тегов

0 голосов
/ 26 июня 2018

У меня есть код, который считает символы в текстовой области, любой символ, пробел, все, что будет считаться как «1». Это отлично работает. Однако я хочу посчитать несколько строк по-другому:

  • буквы, символы, пробел = 1 символ
  •   = 1 символ
  • <li> = 3 символа
  • <br> или <br/> = 50 символов
  • <ol>, </ol>, <ul>, </ul>, </li> = 0 символов

Это обычный код 1 как 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 для каждого &nbsp; и добавить 46 для <br> и т. Д.

1 Ответ

0 голосов
/ 26 июня 2018

Ваша идея сработала. Используйте регулярные выражения для подсчета особых случаев и умножения разницы. 

$('#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>
...