是否可以子字符串到字符串中的下一个空格？

Question

如果输入的文本值包含单词的开头，我会尝试突出显示单词的剩余部分。例如，我们有一个字符串“Nutrition is great!”，如果用户输入“Nutr”，那么我希望突出显示“Nutrition”。我在这方面遇到了很多困难，想知道是否有可能将子字符串转换为下一个可用的空格？或者，如果有人可以给我任何关于 different/better 方法的指示。

我从 This post 中得到了一些启发，但不幸的是，它与我想要的全词不匹配。

我创建了一个沙箱来演示我的示例，您会注意到，如果您输入“Nutr”，只有 2 个选项会突出显示，而所有 3 个选项都应该突出显示吗？

https://codesandbox.io/s/dry-wind-17mko

Answer 1

嗯，首先您需要更改字符串并将两者输入为小写或大写，以便在相同的基础上对两者进行比较。其余一切都很好，您可以使用 .includes() 方法进行检查，并且可以使用 .trim() 方法 trim 您的字符串，因为这样只能突出显示所需的单词。

Answer 2

比较必须基于字符串是大写还是小写，这样我们就可以 select 文本字符串，而不管是大写还是小写。

更新：

此外，我们还需要 select 仅基于匹配项而不是 span 中文本的全长。

更新的代码沙盒： https://codesandbox.io/s/highlighting-z216x

获取特定文本更新以动态工作的逻辑。

useEffect() Result.js

中的代码更改

  useEffect(() => {
    console.log(searchTerm);
    if (titleRef.current) {
      let resultsText = titleRef.current.textContent.toUpperCase();
      const index = resultsText.toUpperCase().indexOf(searchTerm);
      
      const text = resultsText.substr(index, resultsText.length).split(" ")[0];
      if (index >= 0) {
        resultsText =
          resultsText.substring(0, index) +
          "<span>" +
          text +
          "</span>" +
          resultsText.substring(index + text.length);
        titleRef.current.innerHTML = resultsText;
      }
    }
  }, []);

而在 App.js 中，我们需要确保将 searchTerm 作为大写字母传递 props

    <Result
      text="This is nutritional value"
      searchTerm={searchTerm.toUpperCase()}
    />

Answer 3

你有一些其他人已经指出的关于 upper/lower 案例的问题。您还在句子末尾加入了句号，这不太可能是您的本意。

此解决方案不需要更改输入的大小写或任何内容。

我想提供一种使用正则表达式和字符串对象中的 .match() 方法的更简单的方法。

这将允许不区分大小写的匹配，同时只突出显示单词。在下面的代码中，您将看到匹配的搜索词放入 HTML 中，只需调用 .replace() 添加 <span> 标签。

匹配是根据找到键入的字符然后找到单词边界（您在问题中提到的space）来完成的。

if (titleRef.current) {
  let resultsText = titleRef.current.innerHTML;
  const regex = new RegExp("(?=" + searchTerm + ")\w*", "i");
  const found = resultsText.match(regex);
  if (found) {
    titleRef.current.innerHTML = resultsText.replace(found[0],`<span>${found[0]}</span>`);
  }
}

还有 1 个问题。如果搜索不再匹配（假设您键入 'nutrdddd'，原始匹配项仍会突出显示。因此，为了解决这个问题，您需要删除 span 标签，我会把它留给您。

希望这对您有所帮助。这是 CodeSandBox

是否可以子字符串到字符串中的下一个空格？

Is it possible to substring to the next whitespace in a string?

javascript

substring

reactjs