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

How to Search a word from a sentence in javascript

本文关键字：句子 单词 搜索 javascript      更新时间：2023-09-26

这里有这个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;
}

现在我要做的是:

  1. 当用户输入woo时，将输出wood以及找到的结果数量，如- 2 results found。

  2. 当用户输入od时，它也会输出wood以及发现的结果数量，如- 2 results found。

  3. 与ch相同-输出应为chip, chop - 2 results found

  4. 和op -它的输出应该是chop - 1 result found

永远不要调用onclick HTML属性中的函数，而是使用事件。请参考这个SO问题。我已经用jQuery click函数代替了这个调用-如果你喜欢，你可以使用香草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.";

我宁愿把句子分成几个词:

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;

这是一只野兽:

/**
 * @param {string} sel Selector to match 
 * @param {HTMLElement} par (Optional) Parent element | document
 * @returns {HTMLElement} the matched Element by selector
 */
const el = (sel, par) => (par || document).querySelector(sel);
/**
 * @param {string} str String to RegExp escape 
 * @returns {string} String with special RegExp chars escaped
 */
const regEsc = (str) => str.replace(/[-'/''^$*+?.()|[']{}]/g, "''$&");
/**
 * @param {string} str String to search in text
 * @param {string} text 
 * @returns {array} Word/s with bold characters (that match str)
 */
const getPortions = (str, text) => {
  const results = [];
  str = str.trim(); // Remove wrapping whitespaces
  if(str.length > 0) {
    const rgxp = new RegExp("(''S*)?("+ regEsc(str) +")(''S*)?", "ig");
    text.replace(rgxp, function(match, $1, $2, $3){
      results.push(`${$1||""}<b>${$2}</b>${$3||""}`);
    });
  }
  return results;
};

// The task:
const elString  = el("#string"); 
const elSearch  = el("#search"); 
const elResult  = el("#result"); 
elSearch.addEventListener("input", () => {
  const result = getPortions(elSearch.value, elString.textContent);
  elResult.innerHTML =
    !elSearch.value ?
    `` :
    `<i>Found ${result.length} results:</i><br> ${result.join("<br>")}`; 
});
#result b { color: red; }
<p id="string">How much wood could a wood chip chop</p>
<input id="search" type="search" placeholder="Search&hellip;" autosuggestion=off>
<div id="result"></div>

  • 返回结果结果长度，
  • 包含字符的部分，
  • 你不需要按钮来开始搜索。

基本上是这个答案的翻版:截断文本保存关键字

试试这个

 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;
}
相关文章：