Highlighting a string with javascript

Forum Moderators: open

Message Too Old, No Replies

Highlighting a string with javascript

code required

prasanth

9:02 am on Jun 8, 2005 (gmt 0)

Hi All,
I have a requirement with javascript.There will be a string where we have to search for a substring and highlight it. For e.g if search for something in wemasterworld it will highlght all the occurances of it. How do i highlight this using javascript.

RonPK

1:57 pm on Jun 8, 2005 (gmt 0)

You can do a search and replace with the replace() method. Simple example:

<p id="sometext">so, prasanth, what do you think of Webmasterworld? best place on the web?</p>
<a href="#" onClick="highlight('sometext'); return false;">highlight</a>
<script type="text/javascript">
function highlight(el) {
var theText = document.getElementById(el).innerHTML;
theText = theText.replace(/(web)/gi, "<b>$1</b>");
document.getElementById(el).innerHTML = theText;
}
</script>

All occurences of the substring 'web' in the element 'sometext' will be marked with <b>.

prasanth

9:25 am on Jun 10, 2005 (gmt 0)

Thanks for the help....
can you just look at the following code i have done using replace only but my requirement is to highlight the content only if they are individual words... but are not part of another word, e.g web should be highlighted if only web there but not webmasterworld.
just run the sample code i have written with a query string of your choice i.e in the url append?=<query sting>.. Looking for urgent help.

function display() {

var contentString =content.innerHTML;

var mainString = location.href;

alert(mainString);

var choice =location.href.split("?")[1].split("=")[1];

var finalStr= unescape(choice).split(" ");

var expr=finalStr[0];

for(i=1;i<finalStr.length;i++)
{

expr = expr+"¦"+finalStr[i];
alert(expr);

}

var rg=new RegExp(expr,"gi");

var endresult = contentString.replace(rg,function(thematch){ return '<span style="color:black;background-color:yellow">'+thematch+'</span>' ; } );

document.write(endresult);

if(contentString.search(finalStr)!=-1)
{
document.write(endresult);
}
else
{
alert("string not found");
}

}

</script>

</head>

<div id="content">
This is sample page to test the regular expression using javascript
What is a cookie?
A cookie is a chunk of information that you're allowed to save on a user's computer in a structured and somewhat limited fashion. The official cookie specification is available at Netscape, and specifies the format that defines a cookie. Basically, a cookie consists of a 'name=value' pair and several optional attributes which we'll discuss below.
The optional attributes allow you more control over your cookies. Using them can help you determine how long the cookie is valid and what hosts within a domain may have access to them. You can also specify a path, so that any scripts in it or subdirectories below it can read or write the cookie. And you can specify whether a cookie will be sent over a secure communications channel.
So you see, cookies can be a very useful addition to your web site. Let's look at them in more detail.

</div>

</body>
</html>

prasanth

9:35 am on Jun 10, 2005 (gmt 0)

Urgent requirement please help..

RonPK

10:27 am on Jun 10, 2005 (gmt 0)

I can see two basic errors in the code:

var contentString =content.innerHTML;
Make that var contentString = document.getElementById("content").innerHTML;
You can't use document.write() if the page has already fully loaded. Use the innerHTML property to change the contents of the <div>:
document.getElementById("content").innerHTML = "foo, bar, et cetera";

HTH!

prasanth

10:36 am on Jun 10, 2005 (gmt 0)

Thanks for help but the main problem is as follows:
if you search for "a and" all the a's are highlighted but not and's....just run the code i have given and help me out...

RonPK

12:09 pm on Jun 10, 2005 (gmt 0)

Well then, I modified my code a bit. It's up to you to fit it into yours.

<p id="sometext">so, prasanth, what do you think of Webmasterworld? best place on the web?</p> 
<a href="#" onClick="highlight('sometext'); return false;">highlight</a> 
<script type="text/javascript"> 
function highlight(el) { 
var allTheWords = document.getElementById(el).innerHTML.split(' '); 
var myWords = "a do web".split(" ");
for (var i = 0; i < myWords.length; i++) {
myWords[i] = "(^" + myWords[i] + "\\W?$)";
}
myWords = myWords.join("�"); // has to be a solid pipe!
var dynaPat = new RegExp(myWords, "gi");
for (var i = 0; i < allTheWords.length; i++) {
if (dynaPat.test(allTheWords[i])) {
allTheWords[i] = "<strong>" + allTheWords[i] + "</strong>";
}
}
document.getElementById(el).innerHTML = allTheWords.join(' '); 
} 
</script>

Not very elegant, because it loops through all the words in the element, but it seems to work, more or less.

Adapt var myWords to read the query string (location.search).