Question

我在这里有这个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。

Answer 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。

Answer 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;

Answer 3

这是一只野兽：

＆＃13;

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

＆＃13;

b{color:red;}

＆＃13;

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

＆＃13;

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

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

Answer 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;

}

如何在javascript中搜索句子中的单词

4 个答案: