How to highlight a part of text in textarea

B

4

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

Barrage answered 11/12, 2013 at 11:47 Comment(5)

take a look at this https://mcmap.net/q/539651/-format-text-in-a-lt-textarea-gt – Teacart 11/12, 2013 at 11:49

are the texts you want to highlight always starting with @ ? – Lubow 11/12, 2013 at 11:51

@pay4m -->words either start with @ or #. Similar to twitter editor. Thanks – Barrage 11/12, 2013 at 12:0

@spezzino --> I cannot use span or div to compensate textarea as I am feeding this text area to another jquery plugin yuku-t.com/jquery-textcomplete – Barrage 11/12, 2013 at 12:5

you can't highlight a word without wrapping a tag around it, or at least I have no idea about it. – Lubow 11/12, 2013 at 12:11

L

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

Lubow answered 11/12, 2013 at 12:22 Comment(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, '@$1'); editorData = editorData.replace(/#([^ ]+)/g, '#$1'); $('#livePreview').html(editorData);' – Barrage 11/12, 2013 at 13:11

To do both at the same time try /[@#]([^ ]+)/g – Enumeration 11/12, 2013 at 15:18

@Enumeration -> Your suggestion works but I loose # or @ from the word. – Barrage 12/12, 2013 at 5:22

This doesn't work in a textarea, which is what the OP was asking for. – Hospitaler 27/7, 2014 at 17:39

to do it in a textarea there is a good explanation here: codersblock.com/blog/highlight-text-inside-a-textarea – Wiersma 17/10, 2018 at 10:46

S

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>

Shepp answered 8/9, 2016 at 8:44 Comment(0)

L

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

Lubow answered 11/12, 2013 at 12:22 Comment(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, '@$1'); editorData = editorData.replace(/#([^ ]+)/g, '#$1'); $('#livePreview').html(editorData);' – Barrage 11/12, 2013 at 13:11

To do both at the same time try /[@#]([^ ]+)/g – Enumeration 11/12, 2013 at 15:18

@Enumeration -> Your suggestion works but I loose # or @ from the word. – Barrage 12/12, 2013 at 5:22

This doesn't work in a textarea, which is what the OP was asking for. – Hospitaler 27/7, 2014 at 17:39

to do it in a textarea there is a good explanation here: codersblock.com/blog/highlight-text-inside-a-textarea – Wiersma 17/10, 2018 at 10:46

B

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:

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

Bucky answered 12/4, 2018 at 7:23 Comment(0)

P

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.

Propagandism answered 21/8, 2020 at 12:55 Comment(0)

Recommended topics

Hot tags