Highlighting text strings on page using getElementById

Question

I am new to JavaScript. I am facing a problem with my javascript code. I am trying to use the string replace method to highlight the searched text. But it's not working. I must be making some mistake. Or may be I am going for the wrong method. Please help. Here is my code:

<html><head>
<style>span.red { color:red; }</style>
<script language="javascript">
function highlightText(htext) {
    var str = document.getElementById(htext).value;
    //highlight the searched text
    str.replace(/([\w]+)/g, '<span class="red">$1</span>'); 
}
</script></head>

<body><span>Enter a word to search in the paragraph below:</span></br>
<input type="text" id="text-to-find" />
<button onClick="highlightText('text-to-find');">Find</button><hr/><hr/>
<p><b>Type any word from this paragraph in the box above, then click the "Find" button to highlight it red.</b></p></body></html>

Add `document.getElementById(htext).value = str` at the end of your function. You can also store `document.getElementById...` in a variable for slightly improved performance. — Rob W, Dec 04 '11 at 18:35
@RobW thanks for replying.I did as you told. But it is still not working — Naeem Ul Wahhab, Dec 04 '11 at 18:40
Because you can't have HTML inside an input field. You have to create a container, such as a `` or ``, and place it over the element. To find out the position of a character, use the code as supplied in [this answer](http://stackoverflow.com/questions/6930578/get-cursor-or-text-position-in-pixels-for-input-element#7948715). — Rob W, Dec 04 '11 at 18:41

Krizz · Answer 1 · 2011-12-04T20:44:01.050

The first thing that came to my mind when I took a look at your code was that you are trying to use getElementById to get the portion of text as guessed by @Joel. But then, I realized you use it to get a reference to the input box which holds the text to be replaced. This is perfectly correct.

However, you seem to misunderstand a little bit the concept of regular expressions and string.replace method.

It seems you assumed that it is text_to_be_found.replace(some_regexp, substitute). It is not correct. It is: haystack.replace(needle_which_can_be_regexp, substitute) and as string are immutable, it returns the new string after the substitution.

You should do something like the following:

function highlightText(htext)
{
    var str = document.getElementById(htext).value;
    //highlight the searched text
    body.innerHTML = body.innerHTML.replace(str, '<span class="red">' + str + '</span>'); 
}

You don't need regular expressions here. You can substitute body.innerHTML with element.innerHTML to tighten the search domain.

score 1 · Accepted Answer · edited Dec 05 '11 at 00:07

getElementById() method finds an item/element by its id, not by a specified string value.

Here's the fixed code for you, it does what you need it to... You may want to improve upon it though if you're going to use it in a real life project/website.

<html><head>
<style>span.red { color:red; }</style>
<script language="javascript">
function highlightText(htext){
    var str = document.getElementById("sometext").innerHTML;
    str = str.replace(htext, '<span style="background-color:red;">' + htext + '</span>'); 
    document.getElementById("sometext").innerHTML = str;    
}
</script></head>

<body><span>Enter a word to search in the paragraph below:</span></br>
<input type="text" id="text-to-find" />
<button onClick="highlightText(document.getElementById('text-to-find').value);">Find</button><hr/><hr/>
<p id="sometext">
<b>Type any word from this paragraph in the box above, then click the "Find" button to highlight it red.</b></p></body></html>

Alternatively, you could always use this jQuery plugin to do the job.

Highlighting text strings on page using getElementById

2 Answers2