Highlighting text strings on page using getElementById
<p>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:</p>

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

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