Javascript 突出显示输入字段中的单词

我有一个标准输入字段：

假设内容是foo-bar

现在，我希望能够使用javascript/jQuery动态地突出显示输入字段中的“bar”一词。我尝试过使用$'txt'.setSelectionStart5；或$'txt'.selectionStart5；，但似乎什么都不管用。我该怎么做？所有示例都指向$'txt'中的代码。选择范围，但我需要能够从其他地方更改它

通过突出显示编辑我的意思是选择或突出显示一个单词，就像用鼠标选择一个单词来编辑或复制一样。我的意思不是简单地给这个词涂上不同的颜色

经过一个上午的第二次编辑，我终于成功了。当按下箭头键时，我最大的障碍不是阻止默认设置。以下是JSFIDLE：

检查此项

这是一个jquery插件，它可能会帮助您实现结果

我使用了一些字符串函数和setSelectionRange来选择文本框中的文本

HTML

---

我已经在这个

中声明，输入类型文本或文本区域中不允许使用html

一种方法是使用一个内容可编辑的div，然后搜索文本并向匹配的文本添加一个highlight类

例如

$“关键字”。在“输入”上，函数e{ var text=$this.val； //用于正则表达式的转义字符串 text=text.replace/[\-\[\]\/\{\\\\\\\*\+\？\.\\\\^\$\\\\\\\\\\；]/g，\\$&； var re=新的RegExptext，“gi”； $'test'.children.eachfunction{ //如果没有文本输入，则清除上一个。突出显示跨距 如果！文本{ $this.html$this.text； 回来 } //如果匹配正则表达式插入。突出显示类 $this.html$this.text.replace，functionmatch{ 返回+匹配+； }; }; }; .亮点{ 背景：红色； } 试验{ 边框：1px纯蓝色； } 这是酒吧

---

搜索文本：突出显示“使用富文本框尝试”一词是什么意思：此链接可能会对您有所帮助。setSelectionRange有2个或3个参数。选择开始，选择结束，[可选]选择方向；例如：id为='a'的输入值为'foo bar'，如果运行代码文档。getElementByIdasetSelectionRange0，3则将选择'foo'！我想我可以用一个内容可编辑的分区。我会试试的。谢谢很抱歉，我的问题似乎不够清楚。请再次查看-我的意思是高亮显示，就像你用鼠标编辑或复制文本一样。哦。在这种情况下，请参考此抱歉，我不想突出显示，我想选择单词。就像你用鼠标“选择”或“突出显示”一个单词一样。我已经创建了一个小提琴并更新了上面的帖子。请检查一下。注意：这将仅选择第一次出现的文本。而且它是区分大小写的。

<input type="button" value="Select" onmousedown="selectCup(); return false">
 <input type="text" id="select_text">

function selectCup() {

    var search_text = document.getElementById("select_text").value;
    var n = search_text.length;
    var input = document.getElementById("test");
    var input_text = input.value;
    var x = input_text.indexOf(search_text);
    var y = x+n;
    input.focus();
    input.setSelectionRange(x, y); // Highlights "Cup"
};