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

Posted 2023-03-06

【中文标题】jQuery：如何突出显示输入框中的文本？

【英文标题】：jQuery: How to highlight text within an input box?

【发布时间】：2012-08-21 04:48:26

【问题描述】：

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

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

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

感谢您的帮助！

干杯！

【问题讨论】：

您需要查看contentEditable，为您的输入创建一个可编辑区域，将允许您以您描述的方式突出显示文本。或者你可以使用 tinyMCE，但是在两个 contentEditable 和 editable div 之间会更容易学习如何使用。

我在所有可能的查询中搜索了它，甚至查看了 *** 在发布问题时如何进行标签选择，但老实说，我无法弄清楚如何只突出显示已检索到的术语（他们全部以“@”开头）。它实际上类似于 FB 功能，当您键入“@[username]”时，该值会在选择后突出显示。

【参考方案1】：

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

先看看highlightTextarea。由Julien L制作

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

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

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

DEMO

【讨论】：

可能在“@”前添加[ \t]，否则包含“@”的单词将被突出显示！

@11684 我猜你的意思是\s 而不是\t？ \t 是一个制表符。

作为空间为我工作，看看我的答案！

+1！很好的答案！你能看看我的吗？你知道出了什么问题吗？

DEMO 链接上的 404

【参考方案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();
);

FIDDLE DEMO

【讨论】：

感谢@Vins 的回答，但不是因为被选中，我以后可以突出显示它，对吧？

我认为你误解了这个问题，'highlight' 有两种含义。

.select() 不是 jQuery 方法，而是原生 javascript。证明在你的例子中。 jQuery 回调处理程序中的this 是event.target 对象，它只不过是一个普通的DOM 元素对象。在这里，目标是一个被点击的input 元素。 this.select() 是 DOM API method ，而不是 jQuery 函数。