如果单词有空格，如何计算文本区域中的单词

Question

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.

Answer 1

 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');

Answer 2

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_] ie \\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>