7

I need to simulate a find and replace function in my webpage using javascript, no matter with find and replace, but the problem is how to highlight the matched search results inside the textArea before replacing them. I tried to replace matched results with with Bold Tag but it doesn't work because the textArea don't understand HTML tags.

I have used the following code:

function findMyText(searchTxt) {

 var textAreaTxt = "";

 textAreaTxt = document.getElementById("myTxtAreaID").value;
 var match = new RegExp(searchTxt, "ig");     
 var boldText = '<B>' + searchTxt+ '<\/B>';
 var replaced = textAreaTxt .replace(match, boldText);

 document.getElementById("myTxtAreaID").value= replaced;
}

is there any other way to highlight search results in textArea , or how to make textArea understand HTML Tags

Thanks in advance

Some Guy
  • 15,854
  • 10
  • 58
  • 67
George
  • 95
  • 1
  • 2
  • 14
  • When asking about HTML DOM / JS problems in a JSF page, you should rightclick page in webbrowser and do *View Source* to see the generated HTML source code and base your question on that. – BalusC Sep 20 '11 at 13:44
  • My question is pure javascript , it is just inside a jsf page – George Sep 20 '11 at 13:48
  • JavaScript do not know anything about JSF components. JSF runs in webserver and produces HTML. JavaScript runs in webbrowser and works with the generated HTML output of JSF. Once again, rightclick page in browser and do *View Source* to see the generated HTML output and base your JavaScript code and your question on exactly that. – BalusC Sep 20 '11 at 13:54
  • Thanks for your Consideration , but I think you didn't understand me , I know that jsf elements should have full ID in javascript code , the attached code is a simple one. – George Sep 20 '11 at 14:06
  • 1
    @BalusC, egy is right, that's the JS code contained in the html page and the one that does the replacement.. the rest of the html page is not relevant – redShadow Sep 20 '11 at 14:10
  • @red: I was just referring to unnecessary `[jsf]` tag in initial question which I removed. See edit history. – BalusC Sep 20 '11 at 14:13
  • be sure to see the regexp with a "g" flag that mean that the op want to make multiple highlight at the same time not a single occurence so selecting the text is not a good substitute – malko Sep 20 '11 at 14:55

3 Answers3

11
t = document.getElementById("myTxtAreaID");
l = t.value.indexOf(searchText);
if(l!=-1){
t.selectionStart = l;
t.selectionEnd = l+searchText.length
}

What that code does is find the beginning of the found text and set the selectionStart and selectionEnd values for the textarea. That simply selects the text as if the user had selected the text himself. Working demo here

Some Guy
  • 15,854
  • 10
  • 58
  • 67
  • this may select the text, but is not really like a highlight at all. if the user select another part of the text the highlight is gone elsewhere not what the author seems to want – malko Sep 20 '11 at 14:27
  • Agreed, but aren't down votes for specifically harmful answers? I see that this isn't EXACTLY what the OP wanted, but it's a good enough substitute. – Some Guy Sep 20 '11 at 14:45
  • Helped me with a related problem, so +1. – Rich Apodaca Mar 20 '13 at 22:59
  • Simples e eficiente, tudo que precisava. Thanks! – Karra Max Dec 12 '21 at 00:04
3

I think the only possible ways to do that are:

  • use javascript canvas drawing to highlight text inside the textarea (?? quite complex i think)
  • use a "fake" textarea, built using an iframe, like what wysiwyg editors (ckeditor, tinymce, ..) do
redShadow
  • 6,687
  • 2
  • 31
  • 34
2

A textarea can't render htmltags you have to hide your textarea and render the content in a div or an iframe. It's the techniques used by many wysiwyg editors. Another way can be to use a contentEditable div

malko
  • 2,292
  • 18
  • 26
  • I didn't know about contentEditable divs, I just googled and tried some examples, but it seems they don't work in the same way on all browsers.. (they have different problems on firefox 3.6 and 6.0; works nicely on chrome, ..) – redShadow Sep 20 '11 at 14:01
  • yes they don't behave the same in different browsers it's really hard to make stuff with that. The most simple in your case is to just render the content of the textarea in a separate div, when changing the textarea then update the content of the div – malko Sep 20 '11 at 14:04