[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

simple question

Posted on 2004-10-30
14
Medium Priority
?
239 Views
Last Modified: 2010-04-06
i am a newbie

Can anyone suggest how i can search for a specific occurance of a word on a webpage, and construct a highlight button so that when i click it "on " i can highlight all the occurances and when i click it "off" i can view the html page without the highlighting

0
Comment
Question by:Vlearns
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 2
  • +2
14 Comments
 
LVL 3

Expert Comment

by:percyn
ID: 12455498
What browsers do you want this to be compatible with?
Are the use of 3rd party components acceptable?
0
 

Author Comment

by:Vlearns
ID: 12455959
IE only
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 12455991
Hi Vlearns,

If you can't find what you want with IE, you may want to try the Firefox browser:

http://www.mozilla.org/products/firefox/

..and add the functionality of this tool (Advanced Highlighter Button 1.51):

http://update.mozilla.org/extensions/showlist.php?category=Search%20Tools

..which is described here (with screenshots as well):

http://membres.lycos.fr/pcdingo/  (scroll down to Advanced Highlighter Button)

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 15

Expert Comment

by:Daydreams
ID: 12456024
That toolbar has a lots of funcionality, but the Firefox browser's latest version has a "find toolbar" that will highlight as well.

http://www.mozilla.org/products/firefox/releases/

From that page:

"Find is easier and more powerful now with our new Find toolbar. The Find toolbar (which shows at the bottom of the browser window) automatically highlights text in the page as you type and has a useful highlight feature."

I know you want this ability for IE, but I thought I'd mention an alternative.
0
 

Author Comment

by:Vlearns
ID: 12456103
yes that would be helpful, thanks for that ..
but i need to know how this would be implemented.
Traversing the DOM to search for specific occurance and surround that instance by a stylesheet?

does anyone know how to achieve this programmatically?

0
 
LVL 16

Expert Comment

by:OliWarner
ID: 12457977
>> Traversing the DOM to search for specific occurance and surround that instance by a stylesheet?
yes, exactly that!

Just replaces the "word" with <span id="highlight">word</span>


cached google pages do this server side but there is no reason why you couldnt do this client side with javascript.
0
 
LVL 16

Expert Comment

by:OliWarner
ID: 12457982
that span assumes you have a #highlight selector defined in some CSS, CSS which can just be added to the page...
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 12458164
This will work for all modern browsers.  Tested on IE6 and FF1

I post some documentation in a post following this one.

Cd&



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title> Search and Highlight </title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <script type="text/javascript">
   save=false;
   function setBlue(param,src)
   {
      str= new String(param);
      arg= new RegExp(param,'gi');
      src.value='';
      x=new String(document.body.innerHTML);
      save=x;
      x=x.replace(arg,str.fontcolor('blue'));
      document.body.innerHTML=x;
   }
   function clearBlue()
   {
      if(save) document.body.innerHTML=save;
   }
  </script>
</head>
<body>
<form>
Search For:<input type="text" name="sArg">
<input type="button" value="Highlight" onclick="setBlue(this.form.sArg.value,this.form.sArg)">
<input type="button" value="Clear" onclick="clearBlue()">
</form>
<p>
Lorem ipsum dolor sit amet, lacus nonummy tempus, dui nascetur. Sociosqu luctus habitasse. Tempus dictumst curabitur sit id malesuada ipsum, at facilisi dignissim. Hendrerit potenti. Convallis nam. Cursus inceptos risus pretium nec aliquam nascetur. Ultricies vivamus eros congue conubia bibendum magnis nullam malesuada nam ultrices placerat iaculis.
Blandit eu nunc egestas sociosqu cubilia sagittis a mollis nascetur. Nisl euismod curae vivamus. Eleifend fermentum erat. Tempus semper hymenaeos scelerisque massa, purus cursus mus sociis libero. Eu fermentum sodales. Integer ac vestibulum wisi facilisis consequat, vitae mattis enim donec. Molestie orci.</p>
<p>
A dictumst sollicitudin quam habitasse integer netus scelerisque neque orci. Luctus hendrerit quam tempus iaculis praesent tempor per, sociosqu sollicitudin dictum bibendum. Nisl neque ornare viverra ultricies parturient cursus rhoncus inceptos mauris cursus vivamus faucibus. In orci class quis. Conubia condimentum sollicitudin scelerisque varius platea vivamus adipiscing, purus viverra. Nullam nisl elit est quis. Et, diam orci neque ultrices erat.
Habitant pretium. Suscipit ante. Volutpat suscipit odio. Nostra nunc ultrices eleifend egestas cursus. Diam cursus enim habitasse sed, sociis et. Sit interdum mi ridiculus pretium id, senectus tincidunt aenean sem pulvinar pellentesque. Et libero. </p>
<p>
Lorem ipsum dolor sit amet, lacus nonummy tempus, dui nascetur. Sociosqu luctus habitasse. Tempus dictumst curabitur sit id malesuada ipsum, at facilisi dignissim. Hendrerit potenti. Convallis nam. Cursus inceptos risus pretium nec aliquam nascetur. Ultricies vivamus eros congue conubia bibendum magnis nullam malesuada nam ultrices placerat iaculis.
Blandit eu nunc egestas sociosqu cubilia sagittis a mollis nascetur. Nisl euismod curae vivamus. Eleifend fermentum erat. Tempus semper hymenaeos scelerisque massa, purus cursus mus sociis libero. Eu fermentum sodales. Integer ac vestibulum wisi facilisis consequat, vitae mattis enim donec. Molestie orci.</p>
<p>
A dictumst sollicitudin quam habitasse integer netus scelerisque neque orci. Luctus hendrerit quam tempus iaculis praesent tempor per, sociosqu sollicitudin dictum bibendum. Nisl neque ornare viverra ultricies parturient cursus rhoncus inceptos mauris cursus vivamus faucibus. In orci class quis. Conubia condimentum sollicitudin scelerisque varius platea vivamus adipiscing, purus viverra. Nullam nisl elit est quis. Et, diam orci neque ultrices erat.
Habitant pretium. Suscipit ante. Volutpat suscipit odio. Nostra nunc ultrices eleifend egestas cursus. Diam cursus enim habitasse sed, sociis et. Sit interdum mi ridiculus pretium id, senectus tincidunt aenean sem pulvinar pellentesque. Et libero. </p>
<p>
Lorem ipsum dolor sit amet, lacus nonummy tempus, dui nascetur. Sociosqu luctus habitasse. Tempus dictumst curabitur sit id malesuada ipsum, at facilisi dignissim. Hendrerit potenti. Convallis nam. Cursus inceptos risus pretium nec aliquam nascetur. Ultricies vivamus eros congue conubia bibendum magnis nullam malesuada nam ultrices placerat iaculis.
Blandit eu nunc egestas sociosqu cubilia sagittis a mollis nascetur. Nisl euismod curae vivamus. Eleifend fermentum erat. Tempus semper hymenaeos scelerisque massa, purus cursus mus sociis libero. Eu fermentum sodales. Integer ac vestibulum wisi facilisis consequat, vitae mattis enim donec. Molestie orci.</p>
<p>
A dictumst sollicitudin quam habitasse integer netus scelerisque neque orci. Luctus hendrerit quam tempus iaculis praesent tempor per, sociosqu sollicitudin dictum bibendum. Nisl neque ornare viverra ultricies parturient cursus rhoncus inceptos mauris cursus vivamus faucibus. In orci class quis. Conubia condimentum sollicitudin scelerisque varius platea vivamus adipiscing, purus viverra. Nullam nisl elit est quis. Et, diam orci neque ultrices erat.
Habitant pretium. Suscipit ante. Volutpat suscipit odio. Nostra nunc ultrices eleifend egestas cursus. Diam cursus enim habitasse sed, sociis et. Sit interdum mi ridiculus pretium id, senectus tincidunt aenean sem pulvinar pellentesque. Et libero. </p>
</body>
</html>

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12458195
Formatting options:
str.fontcolor('blue') can be replace by any of these string methods:
str.big()
str.blink()
str.bold()
str.fixed()
str.fontsize('5')
str.small()
str.strike()
str.sub()
str.sup()

Basically the properties of the font tag.  The whole thing is accompliched by Javascript inserting a font tag inline.

If you want the search to be case sensitive change the "gi" in the regular expression with "g".

If the search argument is a tag name, property attribute or a literal value found inside the tag, the page formatting may get screwed up, and some of the HTML may be displayed.  The only way around that would be with very complex filtering in the script, or processing individual text nodes instead of the body node itself.  That would be a substantial amount fo work and I'm not looking for a project.  You would probably have to hire someone if you want something that detailed and robust.

Cd&
0
 

Author Comment

by:Vlearns
ID: 12458913
do you  have that documentation in english?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12458933
What don't you understand.  The setting of the highlight of the Regular Expression?

Cd&
0
 

Author Comment

by:Vlearns
ID: 12459266
nope its fine, was a bit confused before, i understand it now.


thanks

0
 

Author Comment

by:Vlearns
ID: 12459273
that answers my question
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12462581
Glad we could help.  Thanks for the A. :^)

Cd&
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question