Как выделить текст в текстовом поле?

Question

Код для текстовой области.

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

Функция, которая будет выполнена

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

функция будет выполняться один раз мы вставить что-то в текстовое поле и все совпадающие слова должны получить выделены только же текстовое поле.

Answer 1

Вы не можете нанести рендеринг внутри текстового поля. Тем не менее, вы можете подделать его по

• тщательно позиционирование DIV позади текстового поля
• Держите внутренний HTML в Div в такой же, как из текстового поля
• Добавить высвечивающейся разметку в DIV

Например :

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

и стиль знака тег

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

Для вашего требования,

• Добавить CSS для тега марки
• Добавьте DIV позади текстовой области.
• в то время как «onpaste» в текстовом поле, скопируйте содержимое текстовой области в innerHTML Div в
• Поиск текст из строки в DIV и добавить метки метки для его

См ссылки codepen Подробности