如何在textarea中突出显示部分文本
Posted
技术标签:
【中文标题】如何在textarea中突出显示部分文本【英文标题】：How to highlight a part of text in textarea 【发布时间】：2013-12-29 09:03:09 【问题描述】：有没有办法在文本区域中突出显示部分文本？
比如说，文本是Hi @twitter @twitpic，现在我只想突出显示 @twitter 和 @twitpic 而不是 Hi。这可能吗？
这必须即时发生。
PS：我不想使用 iFrame
提前致谢
【问题讨论】：
看看这个***.com/questions/12831101/format-text-in-a-textarea 要突出显示的文本是否始终以 @ 开头？ @pay4m -->单词以@或#开头。类似于推特编辑器。谢谢 @spezzino --> 我无法使用 span 或 div 来补偿 textarea，因为我将此文本区域提供给另一个 jquery 插件yuku-t.com/jquery-textcomplete 你不能突出一个词而不用标签包裹它，或者至少我不知道它。 【参考方案1】：对该文本使用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>
【讨论】：
【参考方案2】：如果不在特定单词周围加上标签，就无法突出显示它（或者正如我所说，至少我不知道如何去做）。 但是如果包装标签没有问题，你应该使用正则表达式。
对于以@开头的单词：
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();
【讨论】：
--> 如何同时突出两者的组合？我的代码似乎是错误的。请看一下 'var editorData = $('#taEditor').val(); editorData = editorData.replace(/@([^ ]+)/g, '@$1'); editorData = editorData.replace(/#([^ ]+)/g, '#$1'); $('#livePreview').html(editorData);' 要同时做这两个尝试/[@#]([^ ]+)/g
@gaynorvader -> 你的建议有效，但我从单词中丢失了 # 或 @。
这在文本区域中不起作用，这是 OP 所要求的。
要在 textarea 中进行，这里有一个很好的解释：codersblock.com/blog/highlight-text-inside-a-textarea【参考方案3】：
我来这里是为了寻找一个可以在文本区域中突出显示某些单词的答案。在这个线程中没有找到答案。所以，添加我是如何做到的：
对于此示例，您可以执行以下操作：
从此处下载并包含脚本：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
【讨论】：
【参考方案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中突出显示部分文本的主要内容，如果未能解决你的问题，请参考以下文章
如何更改 Java Swing TextArea 中的突出显示颜色？此外，更改与突出显示位置对应的文本的开头
使用javascript按下开始按钮时，我应该如何突出显示textarea中的文本？