Menu
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
658
For selecting the content of an input (with highlight), use: el. select() . For css manual highlight, see @HashemQolami answer.
Highlight using the HTML5 <mark> tag If you are working on an HTML5 page, the <mark> tag can quickly highlight text. Below is an example of the how to use the mark tag and its result. If your browser supports the <mark> tag, "highlighted text" should have a yellow background.
<textarea> does not support the value attribute.
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> 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(); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
