是否可以将子字符串转到字符串中的下一个空格？
如果输入的文本值包括单词的开头，我将试图突出显示单词的其余部分。例如，我们有一串“营养是伟大的！”，如果用户键入"Nutr“，那么我希望”营养“被突出显示。我在这方面有很大的困难，我想知道是否可以将子字符串转到下一个可用的空格？或者，如果有人能给我指点一个不同的/更好的方法。
我从这个职位获得了一些灵感，但不幸的是，它与我想要的单词不匹配。
我创建了一个沙箱来演示我的示例，您会注意到，如果您输入"Nutr“，那么只有两个选项会被高亮显示，而如果可能的话，所有3个选项都应该突出显示吗？
回答 3
Stack Overflow用户
发布于 2021-01-06 09:48:33
你有一些问题，在其他人已经指出的上/下大小写。你也包括了句末的句号，这不太可能是你的意图。
此解决方案不需要更改输入或任何内容的情况。
我想提供一种更简单的方法，使用正则表达式和String对象的.match()方法。
这将允许不区分大小写的匹配，而只突出显示该单词。在下面的代码中，您将看到匹配的搜索单词被放置到HTML中，只需简单地调用.replace()，添加<span>标记。
匹配的基础是找到键入的字符，然后找到单词边界(您在问题中提到的空格)。
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>`);
}
}还有一个问题。如果搜索不再匹配(假设您键入'nutrdddd‘)，则原始匹配仍然突出显示。因此，要克服这一问题，您需要删除span标记，我将由您决定。
希望这会有帮助。这是CodeSandBox
Stack Overflow用户
发布于 2021-01-06 07:50:16
比较必须基于字符串，无论是大写还是小写，这样我们就可以选择文本字符串，而不管是大写还是小写。
更新：
此外，我们只需要根据匹配来选择术语，而不是在span中选择完整的文本长度。
更新CODESANDBOX: 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()}
/>Stack Overflow用户
发布于 2021-01-06 07:46:37
首先，您需要将字符串和输入都更改为小写或大写，以便在相同的基础上进行比较。rest很好，您可以使用.includes()方法进行检查，并且可以使用.trim()方法修剪字符串，因为这样只能突出显示所需的单词。
https://stackoverflow.com/questions/65598718
复制
腾讯云开发者
