从文本区域的文本框中搜索字符串答案

【问题标题】：Search for a string from a textbox in a textarea从文本区域的文本框中搜索字符串
【发布时间】：2019-10-28 00:27:09
【问题描述】：

Button – 调用一个函数来确定是否文本框中的字符串可以在文本区域的内容中找到。自然，如果找到字符串，则向用户发送消息。

这些是给出的指示，我不知道该怎么做。这是我想出的，我不断收到这个控制台错误：

TypeError: document.getElementById(...) 为空
file:///........program02javascript/program02script.js
10号线

第 10 行：var SearchTerm = document.getElementById("text_box_1").value;

这是我的 HTML：

<div id="requirement #2">
    <h1>Requirement #2</h1>
    <form>
        Search For:
        <input type="text" name="text_box_1">
        <br>
    </form>
    <textarea id="text_area_3"></textarea>
    <button type="button" id="button2" onclick="StringSearch()">Search</button>
</div>

这是我的 Javascript：

function StringSearch() {
    var SearchTerm = document.getElementById("text_box_1").value;
    var TextSearch = document.getElementById("text_area_3").value;

    if (TextSearch.match(SearchTerm) === "") {
        alert("String Found. Search Complete");
    } else {
        alert("No Data found in Text Area");
    }
}

我怎样才能完成这项任务？我不确定我完全明白该怎么做。我试图找到一些示例代码，但没有遇到任何有用的东西。

【问题讨论】：

标签： javascript html dom-events

【解决方案1】：

您尚未将id 添加到元素中，getElementById 根据id 属性的值而不是name 属性的值从DOM 中选择元素。

将id 属性添加到文本框
```
Search For:<input type="text" name="text_box_1" id="text_box_1"><br>
//                                              ^^^^^^^^^^^^^^^
```
您使用match() 来检查是否找到匹配项，但您可以使用indexOf 来检查字符串是否存在于另一个中。
如果用户输入任何要搜索的内容，则添加验证，如果不返回。

演示

function StringSearch() {
  var SearchTerm = document.getElementById("text_box_1").value;
  var TextSearch = document.getElementById("text_area_3").value;

  if (SearchTerm.length > 0 && TextSearch.indexOf(SearchTerm) > -1) {
    alert("String Found. Search Complete");
  } else {
    alert("No Data found in Text Area");
  }
}

<div id="requirement #2">
  <h1>Requirement #2</h1>
  <form>
    Search For:
    <input type="text" name="text_box_1" id="text_box_1">
    <br>
  </form>
  <textarea id="text_area_3"></textarea>
  <button type="button" id="button2" onclick="StringSearch()">Search</button>
</div>

【讨论】：

嗯好的，非常感谢！如果我想显示找到它的句子，或者以某种方式显示它是在哪里找到的……我该怎么做呢？是简单地添加几行代码，还是必须以完全不同的方式进行？
@kronis72 当你使用indexOf()时，你会得到找到匹配的单词的索引，你可以使用这个索引来提取句子/单词
我们可以在 textarea 上突出显示找到的关键字吗？怎么样？谢谢
如果有人还在寻找如何在 textarea 上突出显示找到的关键字，这里是可行的解决方案：stackoverflow.com/questions/63793518/…

【解决方案2】：

function StringSearch() {
  var SearchTerm = document.getElementById("text_box_1").value;
  var TextSearch = document.getElementById("text_area_3").value;

  if (SearchTerm.length > 0 && TextSearch.indexOf(SearchTerm) > -1) {
    alert("String Found. Search Complete");
  } else {
    alert("No Data found in Text Area");
  }
}

<div id="requirement #2">
  <h1>Requirement #2</h1>
  <form>
    Search For:
    <input type="text" name="text_box_1" id="text_box_1">
    <br>
  </form>
  <textarea id="text_area_3"></textarea>
  <button type="button" id="button2" onclick="StringSearch()">Search</button>
</div>

【讨论】：