如何实现获取用户输入并在指定字符串中检索匹配内容的功能

你需要的功能为：预置固定段落文本，搭配搜索框支持用户输入关键词，检索关键词是否存在于段落中，输入are时弹窗提示存在，匹配失败弹窗提示不存在。

原代码问题梳理 #

• 仅获取了p标签的DOM节点，未读取节点内的实际文本内容
• 获取输入框DOM时，getElementById的参数未加引号，存在语法错误
• indexOf检索时给变量textElement加了引号，变成检索固定字符串而非用户输入的内容
• else if语法书写错误，判断相等时误用赋值符=而非比较符
• 缺少弹窗提示逻辑，仅返回布尔值没有实际交互效果

修正后可直接运行的完整代码 #

<p id="p1">Hi, how are you?</p>
<input type="text" placeholder="请输入搜索关键词..." id="myInput">
<button type="button" onclick="getInputValue();">搜索</button>

<script>
function getInputValue() {
  // 读取预置段落的文本内容
  const originText = document.getElementById("p1").textContent;
  // 读取用户输入的关键词并去除首尾空格
  const keyword = document.getElementById("myInput").value.trim();
  
  // 空输入处理，可根据需求调整
  if (!keyword) {
    alert("请输入要检索的内容");
    return;
  }

  // 匹配判断+弹窗提示
  if (originText.indexOf(keyword) > -1) {
    alert("该词汇存在于文本中");
  } else {
    alert("不，该内容不存在");
  }
}
</script>

内容的提问来源于stack exchange，提问作者Sebastian