Highlight specific word on multiple textarea on same page by using Javascript

Question

I want to highlight specific word (for example- green and blue) written in 10 . I have found a Javascript code that is highlighting the words written anywhere on the page in a, p, button etx. But that code is not highlighting the words written in textarea. The code I found is -

'<p>Hello world lorem ipsum dolor sit amet, consectetur adipisicing 
elit. Est vel accusantium 
totam, ipsum delectus et dignissimos mollitia!</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, corporis.
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem voluptas 
perferendis dolores ducimus velit error voluptatem, qui rerum modi? this is amet in the 
wall</small>
</p>

<textarea>hello amet this</textarea>

<style>
.highlight {
 background: lightpink;
 }
 </style>

 <script>
 function highlight(elem, keywords, caseSensitive = false, cls = 'highlight') {
 const flags = caseSensitive ? 'gi' : 'g';
 keywords.sort((a, b) => b.length - a.length);
 Array.from(elem.childNodes).forEach(child => {
 const keywordRegex = RegExp(keywords.join('|'), flags);
 if (child.nodeType !== 3) {
  highlight(child, keywords, caseSensitive, cls);
 } else if (keywordRegex.test(child.textContent)) {
  const frag = document.createDocumentFragment();
  let lastIdx = 0;
  child.textContent.replace(keywordRegex, (match, idx) => {
    const part = document.createTextNode(child.textContent.slice(lastIdx, idx));
    const highlighted = document.createElement('span');
    highlighted.textContent = match;
    highlighted.classList.add(cls);
    frag.appendChild(part);
    frag.appendChild(highlighted);
    lastIdx = idx + match.length;
  });
  const end = document.createTextNode(child.textContent.slice(lastIdx));
  frag.appendChild(end);
  child.parentNode.replaceChild(frag, child);
   }
  });
  }

  highlight(document.body, ['lorem', 'amet', 'autem']);
  </script>

'

So, instead of running your highlight function on document.body, run it on the textarea. — devlin carnate, Apr 21 '20 at 18:49
I don't know, please tell me the code line which should I write. I am very new to Javascript. Because when I write textarea in place of document.body then it does not highlight textarea.? — Dheeraj Kumar, Apr 21 '20 at 18:51
Actually, looking at your function code, it's not going to work because it's adding HTML elements. That won't work in a textaeea. — devlin carnate, Apr 21 '20 at 18:57
Please if you can make some function for me, I want to use it for some education purpose. — Dheeraj Kumar, Apr 21 '20 at 19:02
Does this answer your question? [Rendering HTML inside textarea](https://stackoverflow.com/questions/4705848/rendering-html-inside-textarea) — Heretic Monkey, Apr 21 '20 at 19:05
I also found one example for highlight textarea but that code is jquery and my web page (blogger) only support javascript. - https://codepen.io/lonekorean/pen/gaLEMR — Dheeraj Kumar, Apr 21 '20 at 19:06
Thank you for your help, BUT problem is that I have img tag code in textarea and I don't want to render it (don't want to show image, just want to show code). So if I use img tag in contenteditable div then it is showing image directly instead of showing img tag code. That is the reason I want to highlight word in textarea only. — Dheeraj Kumar, Apr 22 '20 at 14:32

score 1 · Answer 1 · edited Apr 21 '20 at 19:07

1

You can't use a tag span in textarea, you can use a contenteditable="true" on a div instead of textarea.

This post post may be useful.

edited Apr 21 '20 at 19:07

Kurohige

1,378
2
16
24

answered Apr 21 '20 at 19:02

giovybus

349
1
3
10

MARSHMALLOW · Answer 2 · 2020-04-21T19:11:58.690

You can't insert tags in a <textarea>.
But instead, if you put a <div>, a <p> or a <span> with the contenteditable="true" attribute, it will look like a <textarea>!
That will do the trick!

Here's an example:

div {
   width: 100%;
   height: 500px;
}

<div contenteditable="true">Write some text here!<br><br>If you think that this is a &lt;textarea&gt;, then you're completely <span style="color: red;">FALSE!</span></div>

So your code will be:

function highlight(elem, keywords, caseSensitive = false, cls = 'highlight') {
 const flags = caseSensitive ? 'gi' : 'g';
 keywords.sort((a, b) => b.length - a.length);
 Array.from(elem.childNodes).forEach(child => {
 const keywordRegex = RegExp(keywords.join('|'), flags);
 if (child.nodeType !== 3) {
  highlight(child, keywords, caseSensitive, cls);
 } else if (keywordRegex.test(child.textContent)) {
  const frag = document.createDocumentFragment();
  let lastIdx = 0;
  child.textContent.replace(keywordRegex, (match, idx) => {
    const part = document.createTextNode(child.textContent.slice(lastIdx, idx));
    const highlighted = document.createElement('span');
    highlighted.textContent = match;
    highlighted.classList.add(cls);
    frag.appendChild(part);
    frag.appendChild(highlighted);
    lastIdx = idx + match.length;
  });
  const end = document.createTextNode(child.textContent.slice(lastIdx));
  frag.appendChild(end);
  child.parentNode.replaceChild(frag, child);
   }
  });
  }

  highlight(document.body, ['lorem', 'amet', 'autem']);

.highlight {
 background: lightpink;
 }

<p>Hello world lorem ipsum dolor sit amet, consectetur adipisicing 
elit. Est vel accusantium 
totam, ipsum delectus et dignissimos mollitia!</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, corporis.
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem voluptas 
perferendis dolores ducimus velit error voluptatem, qui rerum modi? this is amet in the 
wall</small>
</p>

<div contenteditable="true">hello amet this</div>

And here is living demo: https://codepen.io/marchmello/pen/OJybjwN

Highlight specific word on multiple textarea on same page by using Javascript

2 Answers2