How to highlight a part of text in textarea
Question
Is there a way to highlight a part of text in text-area?
Say, the text is Hi @twitter @twitpic and now I would like to highlight @twitter and @twitpic only and not Hi . Is that possible?
This has to happen on the fly.
PS: I don't want to use iFrame
Thanks in advance
4 answers
solution1
11 2016-09-08 08:44:57
Use setSelectionRange method on that text
Sample code:
<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>
solution2
7 ACCPTED 2013-12-11 12:22:24
without wrapping a tag around the specific words, you cannot highlight it (or as i said, at least I have no idea how to). but if there is no problem with wrapping tags, you should use regEx.
for words starting with @ :
replace(/@([^ ]+)/g, '<span class="atsign">@$1</span>');
and for the words starting with # :
status.replace(/#([^ ]+)/g, '<span class="hashtag">#$1</span>');
check this fiddle
EDIT: you can replace
var status = 'I tweeted something #one #two @three @four';
with
var status = $('#phrase').text();
solution3
2 2018-04-12 07:23:10
I came here looking for an answer where I could highlight certain words in the textarea. Did'nt find an answer in this thread. So, adding how I did it:
For this example, you would do something like:
Download and include scripts from here: http://garysieling.github.io/jquery-highlighttextarea/index.html
And use this:
<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>
More Examples: http://garysieling.github.io/jquery-highlighttextarea/examples.html
solution4
1 2020-08-21 12:55:14
Its pretty simple using jQuery.
HTML part:
<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 part:
$(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})
})
})
Just change the variable findWord for whatever you want to highlight.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.