How to highlight a part of text in textarea

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();

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>

Tags:

Javascript

Html

Css

Textarea

Recent Posts