Question

我有文字输入和文字区域。我想计算文本输入值在文本区域中出现的次数。当文本输入值之前或之后没有任何空格时，以下代码可以正常工作。但是当它有空格时，即使它出现在文本区域，我也会得到一个空值。例如：

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

然而

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

如果我在文本输入中输入“dog_”并且文本区域中有“dog_”，我将如何得到它，计数将为“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);

}

我尝试了各种RegExp，但他们没有解决问题。感谢。

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

<强>更新

@rockstar提出了更好的RegExp。

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

与之前的实现不同，此RegExp确保完美匹配（包括尾随空格）。

如果您对复杂符号感到困惑，请随时查看非常简单的参考here。

更新2

@rockstar再次提出了更好的RegExp。

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

Answer 2

您在正则表达式中使用了正则表达式单词边界\b，但单词边界不包括前面的或前进尾随空格。

如this stackoverflow post;

所述

\b与[^a-zA-Z0-9_]类似，例如\b会检查以查找除“{1}}之外的任何内容 word

这篇文章还展示了搜索词边界的替代方法，包括前面的和前进尾随空格。

尝试更改

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

以

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

甚至

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

第三个代码段并不像第二个代码片段那么严格，但如果您对第二个代码段有疑问，可能会更兼容。

以下是一个工作示例：

＆＃13;
＆＃13;
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);
＆＃13;
<input type="text" id="textInput"> <button id="btn"> Count </button> <textarea id="textArea"></textarea>
＆＃13;
＆＃13;
＆＃13;

如果单词有空格，如何计算textarea中的单词

2 个答案: