Hashtag Counter

Question

I'm wanting to create a similar thing to the character counter on this website - https://character-counter.uk/. However, instead of counting every character I only want to count hashtags. So if I entered #happy and #sad the counter would return the number 2.

I'm new to javaScript and jQuery so am not sure how I could get this to happen.

Say I have this html

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

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

I want the 0 belonging to the text-well span to jump up once whenever a hashtag is typed into the text area.

I've been tinkering around with some things but so far can only come up with this code

var count = 0;

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

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

When entering it into the character counter site using the console the counter still counts up whenever I start typing into the textarea and then resets and starts counting up in twos when a # is entered.

Any help is appreciated.

Possible duplicate of [How to count string occurrence in string?](https://stackoverflow.com/questions/4009756/how-to-count-string-occurrence-in-string) — Marko Gresak, Aug 08 '17 at 14:30
Instead of incrementing every time the user types, I'd suggest doing the entire count on each input event. — Nathan Arthur, Aug 08 '17 at 14:31

Rory McCrossan · Accepted Answer · 2017-08-08T14:35:32.943

2

To achieve this you can simply use the match() method to find the number of hashtags within the value of the given textarea, something like this:

$("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>

Note that I got the hashtag regex from this question

edited Aug 08 '17 at 14:35

answered Aug 08 '17 at 14:33

Rory McCrossan

331,213
40
305
339

test##test count as 1 – Giorgio Catenacci Aug 08 '17 at 14:35
@GiorgioCatenacci so it should - it's a count of hashtags, not hash – freedomn-m Aug 08 '17 at 14:35
Thanks very much for the help. This is exactly what I'm looking for! – Tim Davis Aug 08 '17 at 16:03
I've just been asked to see whether any duplicate hashtags can not be counted and maybe underlined in red or something. I've had a look at various other questions but nothing seems to be working. Any help? – Tim Davis Aug 08 '17 at 18:28
I'd suggest starting a new question for that as it's a very big logic change to your original request – Rory McCrossan Aug 08 '17 at 18:48

score 0 · Answer 2 · answered Aug 08 '17 at 14:36

0

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

answered Aug 08 '17 at 14:36

Osama

2,912
1
12
15

Nathan Arthur · Answer 3 · 2017-08-08T16:31:47.550

This will count hash tags, requiring each pound sign counted to be followed by at least one word character:

$("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>

Basically:

Instead of trying to keep track of a counter, do the entire count every time.
Use .match(pattern).length to get the number of matches, remembering to use the g flag so you actually count all matches.
If you only want to count hashes, /#/ works fine. If you want to match hash tags, ensure the hashtag is followed by a letter by using /#\w/.
Use the keyup event to ensure your count is updated on every letter press.

Hashtag Counter

3 Answers3