How to count the characters in a input text

Question

I have to make a javascript program, with a text field where I write something there with text format and at the same time in another div I show how many times the characters appeared in the text.

Eg.A.

For example:

Appears 17 times in the text of 100 characters; Show me the percentage: 17%

This is easy to do with some Regex, and key listeners. Looks like this may be a school project of sorts so I'm only going to lead you where you need to go. — EasyBB, Jan 02 '20 at 19:13
I think I must do it with key listeners,it is a school project.Thank you for your help — Davidus98, Jan 02 '20 at 19:20
Does this [answer](https://stackoverflow.com/questions/881085/count-the-number-of-occurrences-of-a-character-in-a-string-in-javascript) your question? — Nicolae Olariu, Jan 02 '20 at 19:20
Try to implement something yourself in a JSFiddle or CodePen using @EasyBB's suggestions and ask a new, more specific question if you get stuck, showing us what you have done. Otherwise, you are only gonna get downvotes as you can see... — Danziger, Jan 02 '20 at 19:20
@AnilM That's Python, when flagged it, that was the first result but doesn't apply to `javascript` :-). Thanks to @Teemu! — Nicolae Olariu, Jan 02 '20 at 19:22
Does this answer your question? [Count characters in textarea](https://stackoverflow.com/questions/5371089/count-characters-in-textarea) — Twisty, Jan 02 '20 at 20:04

score 0 · Answer 1 · answered Jan 02 '20 at 19:18

Try this one

const element = document.querySelector('[name="text"]')
element.addEventListener('input', function(e) {
  const {target: {value}} = e;
  const el = document.querySelector('div')
  const letter = el.dataset.letter
  let percentage = [...value].filter(x => x===letter).length / value.length
  el.textContent = `${percentage} %`
  })

<input name='text'>
Percentage: <div data-letter='a'></div>

Twisty · Accepted Answer · 2020-01-02T20:42:58.083

As this is a school project and you tagged jQuery, I am going to give you a jQuery solution sans explaination.

$(function() {
  function countChar(n, h) {
    // Input: Needle, Haystack (Case Sensative)
    // Output: number of needles
    var re = new RegExp(n, 'g'),
      matches = h.matchAll(re),
      r = 0;
    for (var m of matches) {
      r++;
      console.log("Found '" + m[0] + "' start=" + m.index + " end=" + (m.index + m[0].length) + ".");
    }
    return r;
  }
  $("#phrase").keyup(function() {
    var q = $("#query").val(),
      t = $(this).val(),
      c = countChar(q, t);
    $("#results").html("Found " + c + " of '" + q + "' (" + Math.round((c / t.length) * 100) + "%)");
  });
  $("#query").change(function() {
    var q = $("#query").val(),
      t = $("#phrase").val(),
      c = countChar(q, t);
    $("#results").html("Found " + c + " of '" + q + "' (" + Math.round((c / t.length) * 100) + "%)");
  });

  $("#phrase").val("The quick brown fox jumps over the lazy dog").trigger("keyup");
})

#results {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label>Phrase</label> <input type="text" id="phrase" />
  <label>Find</label> <input type="text" id="query" value="a" />
  <span id="results"></span>
</div>

References

String.prototype.matchAll()

How to count the characters in a input text

2 Answers2