0

我正在对输入框中输入的任何单词进行单词搜索。我正在尝试创建一个 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>

4

1 回答 1

0

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

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

在 html 中。这行得通，但是我必须定义一个 CSS 规则来突出显示您的代码中没有发布的内容。

编辑 01.05.2021 - 我没有计算比赛，所以这里完全是：

<!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 放在一个文件中。

于 2021-04-30T08:08:00.480 回答