iPhone Pro Tips: Find Text in Safari with Javascript Bookmarklet

Find... in page javascript bookmarklet

If you're browsing the web on a PC, you can just hit CTRL-F or CMD-F and quickly find any text on a webpage. It's great for finding things fast, especially on long reams of text, and Safari does a nice job of it -- just not Mobile Safari on the iPhone, not yet.

Editor emeritus Mike Overbo brought something very similar to us two years ago (along with a ton of others -- check that link!) when iPhone 1.x made bookmarklets all the rage. Since then, Apple has added a lot of functionality, but still hasn't deigned to gift us with Find... on page. Rafael Cimatti (via App Advice) is keeping the handy Javascript bookmarklet alive via Cydia (though it works on any iPhone). It can't fully replace a built in command, with next, back, etc. options, etc. but if it isn't 100% right, it is 100% "right now".

Just bookmark this link on your iPhone: Find...

Either bookmark it on your desktop browser and sync it over, or on your iPhone copy the code after the break, bookmark a random page, edit it, change the name, and paste in the code (check the App Advice link above for step

And next time you're on a page, hit the bookmark, type in your text, and find away!

Have an iPhone Pro Tip of you own to share? Send it in!

Footnote: 
[via Daveizzle]

Rene Ritchie

Editor-in-Chief of iMore, co-host of Iterate, Debug, ZEN and TECH, MacBreak Weekly. Cook, grappler, photon wrangler. Follow him on Twitter, App.net, Google+.

More Posts

 

0
loading...
0
loading...
0
loading...
0
loading...

← Previously

Browser Wars: Opera Mobile Brings Back "Turbo" Boost to Compete with Safari

Next up →

Shenzhen Worker Commits Suicide over Missing iPhone Prototype - Foxconn Investigating, Apple Comments

There are 25 comments. Add yours.

DDay says:

Agreed. Thank you for this.

Dalekkiller says:

Very useful little tip. Thanks for that. I had to copy it twice as I don't think I managed to select all the text (fat finger syndrome!)

james says:

Hey guys!
What a handy little tip...thanks so much for that, it will make things much easier when searching for particular words! Thanks again!

Hello says:

Great tip. Thanks for that.
Another tip: Download any Webpage or Dokument on the web by pressing a bookmark. Check out "Save My Docs" on the AppStore.

Joe McG says:

That is da bomb. Thanks!

jbrandonf says:

I just became privvy to bookmarklets. So far I only have Twitterific's and Instapaper's (check it out at instapaper.com on your phone). I love these little things!

only1jonarius says:

this is gr8 thanx to @George

Rey says:

I've had this since 2.0. This is old school. I thought it was more known. It's a great bookmarklet to have and this should spread it more.

Wolfmore says:

Yep like already stated check out ipuhelin. They have a bunch more I've used for like a year now...it's sad not everyone knows about this cause your missing out.
http://ipuhelin.com/en/safariplus/

Matt Sawyers says:

For those of you viewing this on your iPhone,
Copy the following block of code
javascript:void%28s%3Dprompt%28%27Find%20text%3A%27%2C%27%27%29%29%3Bs%3D%27%28%27+s+%27%29%27%3Bx%3Dnew%20RegExp%28s%2C%27gi%27%29%3Brn%3DMath.floor%28Math.random%28%29*100%29%3Brid%3D%27z%27%20+%20rn%3Bb%20%3D%20document.body.innerHTML%3Bb%3Db.replace%28x%2C%27%3Cspan%20name%3D%27%20+%20rid%20+%20%27%20id%3D%27%20+%20rid%20+%20%27%20style%3D%5C%27color%3A%23000%3Bbackground-color%3Ayellow%3B%20font-weight%3Abold%3B%5C%27%3E%241%3C/span%3E%27%29%3Bvoid%28document.body.innerHTML%3Db%29%3Balert%28%27Found%20%27%20+%20document.getElementsByName%28rid%29.length%20+%20%27%20matches.%27%29%3Bwindow.scrollTo%280%2Cdocument.getElementsByName%28rid%29%5B0%5D.offsetTop%29%3B
then create a new bookmark, save it. Now go back and edit it. Paste the above code into where the http:// address is.
Viola! :)

Matt Sawyers says:

BTW, it might look at if the code goes off the screen, but just drag the selection dots so that they select as a square around the code.

Richard Harris says:

I know this is an old post but if anyone is interested I've mad an updated version of the bookmarklet. The major change is it effectively supports a find next. When you run the bookmarklet a second time on the same page it pre-populates the last search and if you click find again without updating the search term it will move to the next occurrence in the document. This is handy for long documents where it can be difficult to find other search terms.
There are also some fixes to do with multiple finds. With the old bookmarklet if you did a search for Help and then a search for Helping it wouldn't be able to find Helping because of the way it splits up the words when it does the first find. This version also unhighlights old searches when a new search is done.
The block of code for the new bookmarklet is:
javascript:void(l=%27%27);d=document.body;j=0;lrid=null;if(d.lastfind!=null&&d.lastfindrid!=null){l=d.lastfind;lrid=d.lastfindrid;}void(s=prompt(%27Find%20text:%27,l));if(s!=null&&s!=%27%27){if(s==l){j=d.lastfindindex+1;}else{b=d.innerHTML;if(lrid!=null){x=new%20RegExp(%27([^<])%27,%20%27g%27);b=b.replace(x,%20%27$1%27);}d.lastfind=s;s=%27(%27+s+%27)%27;x=new%20RegExp(s,%27gi%27);rn=Math.floor(Math.random()100);rid=%27z%27+rn;d.lastfindrid=rid;b=b.replace(x,%27$1%27);void(d.innerHTML=b);alert(%27Found%20%27+document.getElementsByName(rid).length+%27%20matches.%27);}d.lastfindindex=j;window.scrollTo(0,document.getElementsByName(rid)[j%document.getElementsByName(rid).length].offsetTop);}

Richard Harris says:

The code block above got a bit mangled. The code block below should work:
javascript:void(l=%27%27);d=document.body;j=0;lrid=null;if(d.lastfind!=null&&d.lastfindrid!=null){l=d.lastfind;lrid=d.lastfindrid;}void(s=prompt(%27Find%20text:%27,l));if(s!=null&&s!=%27%27){if(s==l){j=d.lastfindindex+1;}else{b=d.innerHTML;if(lrid!=null){x=new%20RegExp(%27%3Cspan%20name=%22%27+lrid+%27%22%20id=%22%27+lrid+%27%22%20style=%22color:%20rgb%5C%5C(0,%200,%200%5C%5C);%20background-color:%20yellow;%20font-weight:%20bold;%22%3E([^%3C]%2A)%3C/span%3E%27,%20%27g%27);b=b.replace(x,%20%27$1%27);}d.lastfind=s;s=%27(%27+s+%27)%27;x=new%20RegExp(s,%27gi%27);rn=Math.floor(Math.random()%2A100);rid=%27z%27+rn;d.lastfindrid=rid;b=b.replace(x,%27%3Cspan%20name=%22%27+rid+%27%22%20id=%22%27+rid+%27%22%20style=%22color:%20rgb(0,%200,%200);%20background-color:%20yellow;%20font-weight:%20bold;%22%3E$1%3C/span%3E%27);void(d.innerHTML=b);alert(%27Found%20%27+document.getElementsByName(rid).length+%27%20matches.%27);}d.lastfindindex=j;window.scrollTo(0,document.getElementsByName(rid)[j%document.getElementsByName(rid).length].offsetTop);}

Daniel Pinho says:

Wow, awesome tip! Works on iOS4

Simon says:

Thanks. Very useful tip!

Victor says:

This is the greatest tip for the iPhone. Thank you!

Vicki.V. says:

Excellent. So glad I found this. Helps heaps.

Eric says:

Thanks for the javascript! The script posted September 15th 2009 worked on iPhone 4S 5.0.1. Yes, best tip!

Nick says:

@Eric
Or you could just use iOS 5's built-in on-this-page feature. When you're on a page, go to the google search bar, type something in, and scroll to the bottom.

Chandra Garibai says:

It's easy to say "sign a bunch of guys". But a plan needs names.