[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How can I select multiple tetx on web page?

Posted on 2004-12-01
5
Medium Priority
?
241 Views
Last Modified: 2010-04-06
I knew how to use
txt=document.body.createTextRange();
txt.findText(str)
txt.select();

to select str on web page, but i only one str can be selected using this method, I want to select all the str on page, what can I do? is it possible?
0
Comment
Question by:mikezang
  • 3
  • 2
5 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 200 total points
ID: 12715867
Select not going to happen, if you just want to highlight for a search string use this.

This will work for all modern browsers.  Tested on IE6 and FF1



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


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 detail and robust.

Cd&
0
 
LVL 5

Author Comment

by:mikezang
ID: 12722199
Thank you very much.
It is ok even the selection isn't used. but I want to the highlight looks like the selection, I mean the text is displayed in turn over mode, is it posiible?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12727370
No the string methods on work on the text, the background is not exposed in the string object.

Cd&
0
 
LVL 5

Author Comment

by:mikezang
ID: 12732089
Thanks.
But I have a new question, the 'red'.fontcolor('red') is changed to '<FONT COLOR="red">red</FONT>', but I use that string in another string, something looks like as bwlow, it doesn't work!
str = "<A HREF=javascript:void onClick='document.write(\"green black <FONT COLOR="red">red</FONT>\");return false;'>COLOR</A>"

I need this one as below, what can I do?
str = "<A HREF=javascript:void onClick='document.write(\"green black <FONT COLOR=\\\"red\\\">red</FONT>\");return false;'>COLOR</A>"

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12744813
I'd have to see more of the code to understand what you are doing, but if that sample is the way you are generating code, then this method is not going to work for you.  You need to re-think the design you are creating a maze of unmaintainable code.

Cd&
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
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…
Suggested Courses

834 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