如何在javascript中从句子中搜索单词答案

【问题标题】：How to Search a word from a sentence in javascript如何在javascript中从句子中搜索单词
【发布时间】：2015-09-07 05:09:06
【问题描述】：

我这里有这个 html 代码：

<p id = "str">How much wood could a wood chip chop</p>
<br>
<input type = "text" value = "" id = "txt1"/>
<button onclick = "myFunction()"> Search </button>

<p id="demo">Display the result here.</p>

这里有一个javascript代码：

function myFunction()
{
  var myString = document.getElementById("str").innerHTML;
  var myWord = document.getElementById("txt1").value;
  var myPattern = new RegExp('.'+myWord,'g');

  var myResult = myString.split(" ");

  for(var i=0; i<myResult.length; i++) {
    var result = myResult[i].match(myPattern);
    if(result) break;
  }

  document.getElementById("demo").innerHTML = myResult;

}

现在我想在这里做的是：

当用户输入 woo 时，它会输出 wood 以及找到的结果数量，例如 - 2 results found。
当用户输入 od 时，它还会输出 wood 以及找到的结果数量，例如 - 2 results found。
与 ch 相同 - 输出应为 chip, chop - 2 results found。
加上op - 输出应该是chop - 1 result found。

【问题讨论】：

永远不要从onclick HTML 属性调用函数，而是使用事件。请参考这个 SO 问题：stackoverflow.com/questions/17378199/…
@Yeldar Kurmangaliyev 感谢您的建议。非常感激。问题解决后我会尝试更新它。
@Ashad Shanto，我尝试使用它，正如您在上面的代码中看到的那样，但它仅在您输入单词的最后一个字符串而不是第一个字符串时才有效。
在这里查看它是如何完成的：stackoverflow.com/questions/31830945/…

标签： javascript html

【解决方案1】：

永远不要从onclick HTML 属性调用函数，而是使用事件。请参考this SO question。我已经用 jQuery click 函数替换了这个调用 - 如果你愿意，你可以使用 vanilla JS 方法。

您的代码几乎可以工作了。您可以简单地使用 RegExp match 方法来查找字符串中的出现次数。您无需手动执行此操作。

此代码适用于我：

var myString = document.getElementById("str").innerHTML;
var myWord = document.getElementById("txt1").value;
var myPattern = new RegExp('(\\w*'+myWord+'\\w*)','gi');

var matches = myString.match(myPattern);

if (matches === null)
{
    document.getElementById("demo").innerHTML = "No results"; // Any message or empty
    return;
}

document.getElementById("demo").innerHTML = matches + " - " +  matches.length + " result(s) found.";

这是工作的JSFiddle Demo。

【讨论】：

正则表达式应该类似于 new RegExp('([a-z0-9]*'+myWord+'[a-z0-9]*)','gi') 以获得完整的单词
顺便说一下，ch 返回 3，因为它是 chip、chop、much。
@Jorg 你可以只使用\\w 而不是[a-z0-9]。
它只能获取找到的结果的数量，而不是引用该结果的单词。如上述问题所述，我还希望在搜索字符串中输出结果。
谢谢！它现在起作用了..但是当我搜索不在句子中的内容时，它不会删除结果。请帮我解决这个问题。

【解决方案2】：

我宁愿把句子分解成单词：

var words = myString.split(' ');

现在过滤包含正在搜索的文本的单词：

words = words.filter(function(word) {
  return word.indexOf(myWord) !== -1;
}

然后将它们打印出来或插入 DOM 或其他任何东西：

result = words.join(',') + " - " + words.length + " result(s) found";
document.getElementById("demo".textContent = result;

【讨论】：

【解决方案3】：

这是一个野兽：

var string  = document.getElementById("str").innerHTML;
var elDemo  = document.getElementById("demo"); 

function getPortions(queryString, string) {
  var results = [];
  if(queryString.length > 0){
    var rgxp = new RegExp("(\\S*)?("+ queryString +")(\\S*)?", "ig");
    string.replace(rgxp, function(match, $1, $2, $3){
      results.push( ($1||"") +"<b>"+ $2 +"</b>"+ ($3||"") );
    });
  }
  return results;
}

document.getElementById("txt1").addEventListener("input", function(){
  var result = getPortions(this.value, string);
  elDemo.innerHTML = "Found "+ result.length +" results<br>"+ result.join("<br>"); 
});

b{color:red;}

<p id="str">How much wood could a wood chip chop</p>
<input type="text" id="txt1"/>
<p id="demo">Found 0 results</p>

它返回结果结果长度，
字符的粗体部分，
您不需要按钮即可开始搜索。

基本上这是对这个答案的翻版：Truncate text preserving keywords

【讨论】：

【解决方案4】：

试试这个

 function myFunction()
 {
     var myString = document.getElementById("str").innerHTML;
     var myWord = document.getElementById("txt1").value;
     var myPattern = new RegExp(myWord,'g');

     var myResult = myString.split(" ");
    var innerHtmml="";
    var count=0;

  for(var i=0; i<myResult.length; i++) {
    var result = myResult[i].match(myPattern);
    if(result) {
        alert(myResult[i]);
        innerHtmml=myResult[i]+","; 
      count++;
    }
  }

  document.getElementById("demo").innerHTML = myResult;

}

【讨论】：