Home/ Questions/Q 6907459
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T08:26:15+00:00

I am new to JavaScript. I am facing a problem with my javascript code.

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0