有没有办法在文本区域中突出显示部分文本？
比如说，文本是Hi @twitter @twitpic，现在我只想突出显示 @twitter 和 @twitpic 而不是 Hi。这可能吗？
这必须即时发生。
PS：我不想使用 iFrame
提前致谢
【问题讨论】：
标签： javascript html css textarea
对该文本使用setSelectionRange 方法
示例代码：
<body>
<section>
<textarea id="textarea"></textarea>
<button id="hgh">Hightlight @twiiter</button>
</section>
<script>
window.onload = function () {
var textarea = document.getElementById("textarea");
var checkError = document.getElementById("hgh");
checkError.addEventListener("click", function () {
var index = textarea.innerText.indexOf("@twitter");
if( index >= 0)
textarea.setSelectionRange(index, index + 8);
});
}
</script>
</body>
【讨论】：
如果不在特定单词周围加上标签，就无法突出显示它（或者正如我所说，至少我不知道如何去做）。 但是如果包装标签没有问题，你应该使用正则表达式。
对于以@开头的单词：
replace(/@([^ ]+)/g, '<span class="atsign">@$1</span>');
对于以#开头的单词：
status.replace(/#([^ ]+)/g, '<span class="hashtag">#$1</span>');
编辑：你可以替换
var status = 'I tweeted something #one #two @three @four';
与
var status = $('#phrase').text();
【讨论】：
/[@#]([^ ]+)/g
我来这里是为了寻找一个可以在文本区域中突出显示某些单词的答案。在这个线程中没有找到答案。所以，添加我是如何做到的：
对于此示例，您可以执行以下操作：
从此处下载并包含脚本：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
【讨论】：
使用 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 更改为您想要突出显示的任何内容。
【讨论】：