CODEWITHSUNDEEP
javascriptregex
user3080392
user3080392

Reputation: 1224

How to count words in a textarea if the word has a space

I have a text input and a text area. I want to count the number of times the text input value occurs in the text area. The following code works fine when the text input value doesn't have any spaces before or after. But when it has spaces, I'm getting a null even if it occurs in the text area. For example:

text input value: "dog"
text area value: "dog"
I get "1" in the console log.

However

text input value: "dog_"
text area value: "dog_"
I get "null" in the console log.

How do I get it so if I type "dog_" in the text input and there is a "dog_" in the text area, the count will be "1"

function testCount() {

var textVal = document.getElementById("textInput").value;
var textArea = document.getElementById("textArea").value;
var regex = new RegExp("\\b" + textVal + "\\b",'gi');
var count = textArea.match(regex).length;

console.log(count);

}

I've tried various RegExp but they didn't solve the problem. Thanks.

Upvotes: 0

Views: 119

Answers (2)

yqlim
yqlim

Reputation: 7080

function testCount() {

  var textVal = document.getElementById("textInput").value;
  var textArea = document.getElementById("textArea").value;
  var regex = new RegExp("(^|\\b)" + textVal + "(\\b|\\W|$)",'gi');  // UPDATE: Added "\\W"
  var count = textArea.match(regex);
  
  // To stop function if input is empty
  if (!textVal) return;
  
  // To prevent no-match cases from generating error
  if (!count)
    count = 0;
  else
    count = count.length;

  console.log(count);

}
<input id="textInput" type="text" oninput="testCount()">
<textarea id="textArea"></textarea>

UPDATE

@rockstar suggested an even better RegExp.

new RegExp("(^|[^\\w ])(" + textVal + ")([^\\w ]|$)",'gi')

Unlike the previous implementation, this RegExp ensures perfect match (including trailing spaces).

If you feel confused with the complicated symbols, feel free to look at a very simple reference here.

UPDATE 2

@rockstar again suggested an even better RegExp.

new RegExp("(^|[^\\w ])" + textVal + "(?=[^\\w ]|$)",'gi');

Upvotes: 1

Ari Seyhun
Ari Seyhun

Reputation: 12531

You are using Regex word boundaries \b in your regex but word boundaries do not include preceding or proceeding trailing spaces.

As stated in this stackoverflow post;

\b is similar to [^a-zA-Z0-9_] i.e \b would check for anything except word

This post also shows an alternative to word boundaries for searching including preceding and proceeding trailing spaces.

Try changing

var regex = new RegExp("\\b" + textVal + "\\b",'gi');

to

var regex = new RegExp("(?<=\s|^)" + textVal + "(?=\s|$)", 'gi');

or even

var regex = new RegExp("(?:^|\s|$)" + textVal + "(?:^|\s|$)", 'gi');

The third code snippet is not as strict as the second one, but may be a little more compatible if you have issues with the second snippet.

Here is a working example:

function testCount() {
  var textVal = document.getElementById("textInput").value;
  var textArea = document.getElementById("textArea").value;
  var regex = new RegExp("(?<=\s|^)" + textVal + "(?=\s|$)", 'gi');
  var match = textArea.match(regex);
  var count = match ? match.length : 0;

  console.log(count);
}

document.getElementById('btn').addEventListener("click", testCount);
<input type="text" id="textInput">
<button id="btn">
  Count
</button>
<textarea id="textArea"></textarea>

Upvotes: 0

Related Questions