Count hashtags in a textarea with emojionearea

Navigation
2

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

This is the code:

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

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><scriptsrc="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>
    
asked by anonymous 12.12.2018 / 17:29

1 answer

2

Place at the beginning of the charRemaining() function: 

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

The regular expression: 

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

will count how many hashs # with at least 1 more character textarea content has and will update div.cont-hashtag .

Test: 

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><scriptsrc="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>
    
12.12.2018 / 17:53
IBM DFSORT - Retrieving only the current year for comparison Return javascript result with controller