標籤計數器

Question

我想創建一個類似的東西在這個網站上的字符計數器 - https://character-counter.uk/。但是，我並不是要計算每個角色，而只是要計數標籤。因此，如果我輸入了#happy和#sad，計數器將返回數字2.

我是新來的javaScript和jQuery，所以我不知道如何才能讓它發生。

說我有這個網站

<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; 
    } 
}); 

當使用計數器仍然計數的控制檯中輸入入字符計數器網站每當我開始打字進入文本區域，然後重置並在＃進入時開始以兩個數字向上計數。

任何幫助表示讚賞。

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>

注意，我得到了hashtag正則表達式從this question

Answer 2

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

Answer 3

這會計算哈希標記，需要計算每英鎊符號應遵循由至少一個單詞字符：

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

<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:&nbsp;&nbsp;<span 
 
class="well text-well">0</span></div>

基本上是：

• 而不是
  努力保持計數器的軌道，做到整個每次計數。
• 使用.match(pattern).length獲得匹配數，記住使用g標誌，以便實際計算所有匹配。
• 如果你只想計算哈希，/#/工作正常。如果您想匹配散列標籤，請確保標籤後面跟着一個字母/#\w/。
• 使用keyup事件來確保每次按字母時更新您的計數。