iPhone Pro Tips: Find Text in Safari with 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”.
Here’s the bookmarklet: Find…
Either bookmark it on your desktop browser (drag it to the bookmark bar on desktop Safari) 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 by step instructions).
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!
[via Daveizzle]
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
July 22nd, 2009 at 7:01 am
Best. Tip. Ever
July 22nd, 2009 at 7:16 am
Agreed. Thank you for this.
July 22nd, 2009 at 7:35 am
Very cool tip. Thanks!
July 22nd, 2009 at 7:37 am
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!)
July 22nd, 2009 at 8:05 am
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!
July 22nd, 2009 at 8:31 am
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.
July 22nd, 2009 at 8:36 am
Ummmm… There’s a whole plethora of these:
http://ipuhelin.com/en/safariplus/
July 22nd, 2009 at 8:42 am
That is da bomb. Thanks!
July 22nd, 2009 at 9:03 am
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!
July 22nd, 2009 at 9:46 am
http://www.theiphoneblog.com/2007/07/31/bookmarklet-favelet-smorgasbord/
July 22nd, 2009 at 10:55 am
this is gr8 thanx to @George
July 22nd, 2009 at 11:21 am
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.
July 22nd, 2009 at 3:17 pm
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/
July 22nd, 2009 at 3:55 pm
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!
July 22nd, 2009 at 3:58 pm
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.
September 15th, 2009 at 1:27 am
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);}
September 15th, 2009 at 2:12 am
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);}