使用 span 元素计数的单词搜索

Question

我正在努力对输入框中输入的任何单词进行单词搜索。我正在尝试创建一个 div 元素，该元素将在输入框下方显示一个字符串，该字符串由在每个段落中至少找到一次的所有单词组成，用于连续搜索。我还想创建一个 span 元素，用于维护在所有搜索的所有段落中找到的单词数。我完全迷失了所有这些，甚至不确定从哪里开始。

/*window.onload = function()
 {
document.getElementById("searchbutton").onclick = searchClick;

};
  I needed to bring  this one line lower to work on commenting out  */

but1 = document.querySelector("#searchbutton");
but1.addEventListener('click', searchClick);


// Called when the Search button is clicked.
// Looks for paragraphs matching a search string and highlights them. 

function searchClick() {
  var searchPhrase = document.getElementById("searchtext").value;
  /*var main = document.querySelector("#main");*/
  var mainParas = document.getElementsByTagName("p");

  for (var i = 0; i < mainParas.length; i++) {

    if (mainParas[i].textContent.indexOf(searchPhrase) >= 0) { mainParas[i].className = "highlighted"; }    // highlight 
    else {
      mainParas[i].className = null; // un-highlight
    }

  }

}

<body>
  <div id="main">
    <p>The Phoenix Suns are a professional basketball team based in
      Phoenix, Arizona. They are members of the ...</p>
    <p>The Suns have been generally successful since they began play as an
      expansion team in 1968. In forty years of play they have posted ...</p>
    <p>On January 22, 1968, the NBA awarded expansion franchises to an
      ownership group from Phoenix and one from Milwaukee. ...</p>
    <ul>
      <li>Richard L. Bloch, investment broker/real estate developer...</li>
      <li>Karl Eller, outdoor advertising company owner and former...</li>
      <li>Donald Pitt, Tucson-based attorney;</li>
      <li>Don Diamond, Tucson-based real estate investor.</li>
    </ul>
  </div>

  <p>Page by Marty Stepp. <br />
    Some (all) information taken from Wikipedia.</p>
  <hr />

  <div>
    Search for text:
    <input id="searchtext" type="text" />
    <button id="searchbutton">Search</button>
  </div>
</body>

Answer 1

您的问题似乎是 document.querySelector("#searchbutton") returns 为空，因此 but1.addEventListener('click', searchClick); 失败。我没有搜索原因，而是跳过了添加侦听器并直接将 onclick 函数附加到

<button id="searchbutton" onclick="searchClick()">Search</button>

在html。这行得通，但我必须定义一个 css 规则来突出显示您的代码中未发布的规则。

编辑 2021 年 5 月 1 日 - 我没有介绍比赛的计数，所以这里是完整的：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style>
            p.highlighted { background-color: Yellow; }
        </style>
    </head>
    <body>
    <body>
        <script type="text/javascript">
            function searchClick() {
                var count = 0;
                var searchPhrase = document.getElementById("searchtext").value;
                var mainParas = document.getElementsByTagName("p");
                for (var i = 0; i < mainParas.length; i++) {
                    if (mainParas[i].textContent.indexOf(searchPhrase) >= 0) {
                        mainParas[i].className = "highlighted"; // highlight
                        count += mainParas[i].textContent.split(searchPhrase).length - 1;
                    } else {
                        mainParas[i].className = null; // un-highlight
                    }
                }
                document.getElementById("found").textContent = count + " matches found";
            }
        </script>
        <div id="main">
            <p>The Phoenix Suns are a professional basketball team based in Phoenix, Arizona. They are members of the ...</p>
            <p>The Suns have been generally successful since they began play as an expansion team in 1968. In forty years of play they have posted ...</p>
            <p>On January 22, 1968, the NBA awarded expansion franchises to an ownership group from Phoenix and one from Milwaukee. ...</p>
            <ul>
                <li>Richard L. Bloch, investment broker/real estate developer...</li>
                <li>Karl Eller, outdoor advertising company owner and former...</li>
                <li>Donald Pitt, Tucson-based attorney;</li>
                <li>Don Diamond, Tucson-based real estate investor.</li>
            </ul>
        </div>
        <p>Page by Marty Stepp. <br />
        Some (all) information taken from Wikipedia.</p>
        <hr />
        <div>Search for text:
            <input id="searchtext" type="text" />
            <button id="searchbutton" onclick="searchClick()">Search</button>
            <span id="found"></span>
        </div>
    </body>
</html>

计数发生在循环检查段落时。之前，定义了一个变量 count，如果匹配发生，它会在内部增加，在循环之后，span id="found" 会更新为该变量的值。

为了计算短语的匹配次数而不是匹配的段落数，文本内容使用搜索短语作为分隔符进行拆分。那么件数减一就是出现的次数。计算的是短语，而不是单词。短语“the”出现在“the”和“they”中，但不出现在“The”中。不要求区分大小写，也不难实现。将搜索词组和要搜索的文本都大写。

为简单起见，我将 HTML、Javascript 和 CSS 放在一个文件中。

使用 span 元素计数的单词搜索

Word search with span element count

javascript

html

wordsearch