如何突出显示文本框中的文本？

Question

The code for text area.

<div>
      <textarea id="ta" onpaste="functionFind(event)"></textarea>
</div>

The function that will be executed

function functionFind(pasteEvent)
{    
    var textareacont = (pasteEvent.originalEvent || pasteEvent).clipboardData.getData("text/html");
    var tofindword = prompt("Enter the word to find");
    if(textareacont.includes(tofindword ))
    {
        //What code do I write here so that all the word that matches "tofindword" gets highlighted in the same textbox only
    }
}

The function will be executed once we paste something into the textbox and all the matching words should get highlighted in the same textbox only.

Answer 1

You can't actually render markup inside a textarea. However, you can fake it by

• carefully positioning a div behind the textarea
• Keep the div's inner HTML same as of textarea
• Add your highlight markup to the div

For example:

<div class="container">
    <div class="backdrop">
    <div class="highlights">
            <mark>This</mark> demo shows how to highlight bits of text within a textarea. <mark>Alright</mark>, that's a lie. <mark>You</mark> can't actually render markup inside a textarea. <mark>However</mark>, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. <mark>JavaScript</mark> takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. <mark>Hit</mark> the toggle button to peek behind the curtain. <mark>And</mark> feel free to edit this text. <mark>All</mark> capitalized words will be highlighted.
        </div>
    </div>
<textarea>
    This demo shows how to highlight bits of text within a textarea. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.</textarea>
</div>

And style the mark tag

mark {
  border-radius: 3px;
  color: transparent;
  background-color: #b1d5e5;
}

For your requirement,

• Add css for mark tag
• Add a div behind your text area.
• while 'onpaste' in textarea, copy the content of text area into div's innerHTML
• Search for the text from the prompt in the div and add mark tag for it

Refer the codepen link for details