jQuery：如何突出显示输入框中的文本？答案

【问题标题】：jQuery: How to highlight text within an input box?jQuery：如何突出显示输入框中的文本？
【发布时间】：2012-08-21 04:48:26
【问题描述】：

我想知道如何突出显示输入框中的某些文本；简单的例子，假设我想在输入时突出显示以“@”开头的所有术语。

所有术语均从远程自动完成建议列表中检索。

我面临的问题是这个输入框，因为我无法在文本周围添加 html 标签，因此无法根据这些特定术语制作 css...

感谢您的帮助！

干杯！

【问题讨论】：

您需要查看contentEditable，为您的输入创建一个可编辑区域，将允许您以您描述的方式突出显示文本。或者你可以使用 tinyMCE，但是在两个 contentEditable 和 editable div 之间会更容易学习如何使用。
我在所有可能的查询中搜索了它，甚至查看了 Stackoverflow 在发布问题时如何进行标签选择，但老实说，我无法弄清楚如何只突出显示已检索到的术语（他们全部以“@”开头）。它实际上类似于 FB 功能，当您键入“@[username]”时，该值会在选择后突出显示。

【解决方案1】：

我希望，这就是你所追求的。

有了它，您可以执行以下操作：

$("textarea").highlightTextarea({
    words: ["\\B@\\w+"],
    color: "lightblue",
    id: "mark"
});

正则表达式 \\B@\\w+ 在非单词边界 (\B) 处断言位置，后跟 @ 并匹配 \w 下的所有内容。

【讨论】：

【解决方案2】：

您可以在 jQuery 中使用.select 方法...这是一个简单的示例。

$(input).focus(function() { 
  this.select(); 
});

或

$('input').click(function() {
 // the select() function on the DOM element will do what you want
 this.select();
});

【讨论】：

感谢@Vins 的回答，但不是因为被选中，我以后可以突出显示它，对吧？
我认为你误解了这个问题，'highlight' 有两种含义。
.select() 不是 jQuery 方法，而是原生 JavaScript。证明在你的例子中。 jQuery 回调处理程序中的this 是event.target 对象，它只不过是一个普通的DOM 元素对象。在这里，目标是一个被点击的input 元素。 this.select() 是 DOM API method ，而不是 jQuery 函数。