Question

有没有办法在文字区域中突出显示部分文字？

说，文字为Hi @twitter @twitpic，现在我想强调 @twitter 和 @twitpic ，而不是嗨。这可能吗？

这必须在飞行中发生。

PS：我不想使用 iFrame

提前致谢

Answer 1

没有在特定单词周围包装标签，你无法突出显示它（或者如我所说，至少我不知道如何）。但是如果包装标签没有问题，你应该使用regEx。

以@：

开头的单词

replace(/@([^ ]+)/g, '<span class="atsign">@$1</span>');

以及以＃：

开头的单词

status.replace(/#([^ ]+)/g, '<span class="hashtag">#$1</span>');

检查this fiddle

编辑：您可以替换

var status = 'I tweeted something #one #two @three @four';

与

var status = $('#phrase').text();

Answer 2

在该文字上使用<!DOCTYPE html> <html> <body> //here </body> </html>方法

示例代码：

setSelectionRange

Answer 3

我来到这里寻找答案，我可以突出显示textarea中的某些单词。在这个帖子中找不到答案了吗？所以，添加我的方式：

对于此示例，您可以执行以下操作：

从此处下载并添加脚本：http://garysieling.github.io/jquery-highlighttextarea/index.html

并使用此：

<script>
$('textarea').highlightTextarea({
 words: ['@twitter', '@twitpic'],
 id: 'demoCustom',
 caseSensitive: false
 // or a regular expression like -> words: ['@([^ ]+)']
});
</script>

<style>
 #demoCustom mark {
  padding:0 3px;
  margin:-1px -4px;
  border-radius:0.5em;
  border:1px solid pink;
 }
</style>

更多示例：http://garysieling.github.io/jquery-highlighttextarea/examples.html

Answer 4

使用jQuery非常简单。

HTML部分：

<textarea id="test">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam rhoncus aliquam metus. Praesent vitae arcu tempor neque lacinia pretium.</textarea>
<button id="search">search</button>

JS部分：

$(function(){
  $("#search").click(function(){
    var area   = $('#test');
    var findWord = "rhoncus";
    var index = area.val().indexOf(findWord);
    area.focus().prop({'selectionStart': index, 'selectionEnd': index+findWord.length})          
  })
})

只需为您要突出显示的内容更改变量findWord。

如何在textarea中突出显示部分文本

4 个答案: