25

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

5

4 Answers 4

11

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>
8

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();
5
  • --> how to highlight the combination of both at a time? My code seems to be wrong. Please have a look at it 'var editorData = $('#taEditor').val(); editorData = editorData.replace(/@([^ ]+)/g, '<span style="color:#3366CC">@$1</span>'); editorData = editorData.replace(/#([^ ]+)/g, '<span style="color:#3366CC">#$1</span>'); $('#livePreview').html(editorData);' Dec 11, 2013 at 13:11
  • 1
    To do both at the same time try /[@#]([^ ]+)/g Dec 11, 2013 at 15:18
  • @gaynorvader -> Your suggestion works but I loose # or @ from the word. Dec 12, 2013 at 5:22
  • 52
    This doesn't work in a textarea, which is what the OP was asking for.
    – Mark
    Jul 27, 2014 at 17:39
  • 2
    to do it in a textarea there is a good explanation here: codersblock.com/blog/highlight-text-inside-a-textarea
    – Cinn
    Oct 17, 2018 at 10:46
2

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:

  1. Download and include scripts from here: http://garysieling.github.io/jquery-highlighttextarea/index.html

  2. 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

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.