Question

我想在这个网站上为角色计数器创建一个类似的东西 - https://character-counter.uk/。但是，我不想计算每个字符，而只想计算主题标签。因此，如果我输入#happy和#sad，则计数器将返回数字2。

我是javaScript和jQuery的新手，所以我不确定如何才能实现这一点。

说我有这个HTML

  <textarea rows="16" class="form-control"></textarea>

  <div class="remaining-counter">Characters Counted:&nbsp;&nbsp;<span
  class="well text-well">0</span></div>

我希望只要在文本区域输入主题标签，属于文本井范围的0就会跳起来。

我一直在修补一些东西，但到目前为止只能提出这个代码

var count = 0;

 $("textarea").on("input", function() {

  if ($(this).val().match(/#/)) {
    $('.text-well').html(count++);
  } else {
    return;
  }
});

当使用控制台将其输入字符计数器站点时，只要我开始在textarea中输入，计数器仍然会计数，然后在输入＃时重置并开始计算两次。

感谢任何帮助。

Answer 1

要实现这一点，您只需使用match()方法查找给定textarea值内的主题标签数量，如下所示：

$("textarea").on("input", function() {
  var text = $(this).val();
  var count = (text.match(/(^|\W)(#[a-z\d][\w-]*)/g) || []).length;
  $('.text-well').html(count);
}).trigger('input');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<textarea rows="10" cols="40" class="form-control">Lorem #ipsum dolor #sit amet #consectetur adipiscing</textarea>

<div class="remaining-counter">Hashtags Counted:&nbsp;&nbsp;<span class="well text-well">0</span></div>

请注意，我从this question

获取了hashtag正则表达式

Answer 2

var count = 0;
$("textarea").on('change keyup paste', function() {
if ($(this).val().match(/#/)) {
$('.text-well').html(count++);
}
});

Answer 3

这会计算哈希标记，要求每个英镑符号计数后跟至少一个单词字符：

＆＃13;

 service.getPageNavState().subscribe((s) => {
            state = s;
 });

＆＃13;

$("textarea").on("keyup", function() {
    var matches = $(this).val().match(/#\w+\b/g);
    var count = matches ? matches.length : 0;
    $('.text-well').html(count);
});

＆＃13;

基本上：

不是试图跟踪计数器，而是每次都进行整个计数。
使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea rows="10" class="form-control"></textarea> <div class="remaining-counter">Characters Counted:  <span class="well text-well">0</span></div>获取匹配数，记住使用.match(pattern).length标记，以便实际计算所有匹配项。
如果您只想计算哈希值，g工作正常。如果您想匹配哈希标记，请使用/#/确保主题标签后跟一个字母。
使用/#\w/事件确保在每次按下信件时更新您的点数。

标签计数器

3 个答案: