Count hashtags in a textarea with emojionearea

Question

I would like to know how to count hashtags in a textarea with emojionearea

That is the code:

I would like to know how to count hashtags in a textarea

Example:

const maxLength = 2200
const emojionearea = $("#emojionearea1").emojioneArea({
  events: {
    /**
     * Informa a função callback do evento `keyup`
     * Caso queira utilizar outro evento, basta dá
     * uma olhada na documentação:
     * https://github.com/mervick/emojionearea#events
     */
    keyup: (editor) => { charRemaining(editor[0]) }
  }
})


function charRemaining(editor) {
  /**
   * Captura o valor do atributo "maxlength" e 
   * calcula a quantidade restantes de caracteres
   */
  let charRemaining = maxLength - editor.textContent.length

  /* Converte o valor para pt-BR (Adiciona o "." em caso de milhar) */
  count.textContent = charRemaining.toLocaleString()

  /**
   * Utiliza uma operação ternária para verificar a quantidade de caracteres restantes
   * Se a qnt. restante for maior que 2190 => Verde, caso contrário realiza outra opção ternária
   * Se a qnt. restante for maior que 2180 e menor que 2190 => Laranja, caso contrário utiliza o vermelho
   */
  count.style.color = charRemaining > 2190 ? 'green' : charRemaining > 2180 ? 'orange' : 'red'
  count.style.backgroundColor = charRemaining > 2190 ? '#00800026' : charRemaining > 2180 ? '#ffa50026' : '#ff000026'
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.min.css" rel="stylesheet"/>

<div class="row">
  <div class="span6">
    <textarea id="emojionearea1"></textarea>
  </div>
  
  <span class="texto-cont">Restam <span id="count">2.200</span> caracteres</span> <span><span class="cont-hashtag">0</span> Hashtags</span>
</div>

Answer 1

Place at the beginning of the function charRemaining():

var contaTags = editor.textContent.match(/#[\w'"!@$%¨&*()-_=+\[\]{}~^;:,.<>\/?\\\|]/g);
$(".cont-hashtag").text(contaTags ? contaTags.length : "0");

The regular expression:

/#[\w'"!@$%¨&*()-_=+\[\]{}~^;:,.<>\/?\\\|]/g

will count how many hashs # at least 1 character longer than the content of textarea has and will update the div.cont-hashtag.

Testing:

const maxLength = 2200
const emojionearea = $("#emojionearea1").emojioneArea({
  events: {
    /**
     * Informa a função callback do evento `keyup`
     * Caso queira utilizar outro evento, basta dá
     * uma olhada na documentação:
     * https://github.com/mervick/emojionearea#events
     */
    keyup: (editor) => { charRemaining(editor[0]) }
  }
})


function charRemaining(editor) {

   var htagsbg;
   var contaTags = editor.textContent.match(/#[\w'"!@$%¨&*()-_=+\[\]{}~^;:,.<>\/?\\\|]/g);
   
   if(contaTags && contaTags.length <= 10){
      htagsbg = "green";
   }else if(contaTags && contaTags.length > 10 && contaTags.length <= 24){
      htagsbg = "orange";
   }else if(contaTags && contaTags.length > 24 && contaTags.length <= 30){
      htagsbg = "red";
   }
   
   $(".cont-hashtag")
   .text(contaTags ? contaTags.length : "0")
   .css("background-color", htagsbg);

  /**
   * Captura o valor do atributo "maxlength" e 
   * calcula a quantidade restantes de caracteres
   */
  let charRemaining = maxLength - editor.textContent.length

  /* Converte o valor para pt-BR (Adiciona o "." em caso de milhar) */
  count.textContent = charRemaining.toLocaleString()

  /**
   * Utiliza uma operação ternária para verificar a quantidade de caracteres restantes
   * Se a qnt. restante for maior que 2190 => Verde, caso contrário realiza outra opção ternária
   * Se a qnt. restante for maior que 2180 e menor que 2190 => Laranja, caso contrário utiliza o vermelho
   */
  count.style.color = charRemaining > 2190 ? 'green' : charRemaining > 2180 ? 'orange' : 'red'
  count.style.backgroundColor = charRemaining > 2190 ? '#00800026' : charRemaining > 2180 ? '#ffa50026' : '#ff000026'
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.min.css" rel="stylesheet"/>
<div class="row">
  <div class="span6">
    <textarea id="emojionearea1"></textarea>
  </div>
  
  <span class="texto-cont">Restam <span id="count">2.200</span> caracteres</span> <span><span class="cont-hashtag">0</span> Hashtags</span>
</div>