Using .match() on Content of Textarea

Question

I did some searching around and found some issues similar to mine, but I was hoping for a resolution that corrects my pre-existing code.

Here's the codepen if you want to see the whole thing: http://codepen.io/JTBennett/pen/ygyZwE

$('#ST_txt_write').keyup(function(){
var childText = $('#ST_cmp_body').text();
var count = (childText.match(/hi/g) || []).length;
$('#ST_KW').html(count);
});

The issue is that I can't get the matching function to work with a textarea so the user can type whatever they want in the box and that will be what the code seeks to match. I tried making a variable that returns the text content of the box (just like the childText var you see there) but that would only match once and be done instead of counting.

Any help in the right direction would be most appreciated. I'm sorry I'm not very good with jQuery, or anything for that matter.

Answer 1

The example you gave in your question has important differences from your codepen. In your question, you have a regex literal that you are passing into .match(), and in your codepen, you are passing a string into .match(). What you need to do is create a new regular expression using new RegExp() and pass it the global flag.

The code would look as follows:

$('#ST_txt_write').keyup(function(){
  var childText = $('#ST_cmp_body').val();
  var KW = $('#ST_KW_txt').val();
  var regex = new RegExp(KW, 'g'); // <--- This creates a regex from the string in KW
  var count = (childText.match(regex) || []).length; // <-- Use regex here instead of string
  $('#ST_KW').html(count);
});

Here's a working example:

$(function() {
  $('#ST_txt_write').keyup(function() {
    var childText = $('#ST_cmp_body').val();
    var KW = $('#ST_KW_txt').val();
    var regex = new RegExp(KW, 'g');
    var count = (childText.match(regex) || []).length;
    $('#ST_KW').text(count);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ST_txt_write">
  <textarea id="ST_cmp_body" style="height: 200px; width: 300px;"></textarea>
</div>
<div>
  Keywords:
  <input type="text" id="ST_KW_txt" />
</div>
<div>
  # of Keywords Found: <span id="ST_KW"></span>
</div>