텍스트를 강조 표시하려면 어떻게해야합니까?

Question

텍스트 영역의 코드입니다. 우리가 텍스트 상자에 무언가를 붙여 넣기와 일치하는 모든 단어는 같은 텍스트 상자에 강조 취득해야하면이 기능이 실행됩니다

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

실행됩니다

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

기능.

Answer 1

실제로 텍스트 영역 내에 마크 업을 렌더링 할 수 없습니다. 그러나, 당신은 할 수는

• 조심스럽게
• 예를 들어 사업부

에 강조 마크 업을 추가 텍스트 영역의 동일 사업부의 내부 HTML을 유지 텍스트 영역

뒤에 사업부의 위치를 ​​가짜 :

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

그리고 마크 태그의 스타일을

마크 태그

에 대한 귀하의 요구를 들어 0

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

,

• 추가 CSS는 텍스트 영역 뒤에 사업부를 추가합니다.
• 동안, 텍스트 영역에서 'onpaste'사업부에 프롬프트에서 텍스트 사업부의 innerHTML을에
• 검색을 텍스트 영역의 내용을 복사하고

은 자세한 내용은 codepen 링크를 참조하십시오 마크 태그를 추가