It is currently Tue Sep 21, 2021 2:03 pm

All times are UTC

Post new topic Reply to topic  [ 1 post ] 
Author Message
 Post Post subject: Expose anchor text in a webpage
Godlike Poster
Godlike Poster
Years of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membershipYears of membership
User avatar

Joined: Sun Oct 16, 2005 9:42 am
Posts: 8798
Karma: 17

Location: Imagine in your mind a posh country club
Steam Login Name: azcn2503
Hi all

Had a requirement recently to quickly scrape anchor text links from a webpage containing the name attribute, so you can link to them with webpage.html#anchorname etc.. Sometimes, forums and wiki articles have these anchor names but don't expose it to the user, even though they are incredibly useful for linking someone to a specific point in a document.

So I made the following script:

(function() {var a = document.querySelectorAll('a[name]');var f = false;for(var i in a) {if(a.hasOwnProperty(i) && a[i].name) {f = true;var h = a[i].innerHTML;console.log(location.href + '#' + a[i].name + ' - ' + (h != '' ? h.trim() : 'No link text'));}}if(!f) { console.log('No anchors'); }})();

You can save it as a bookmark in your browser (just add javascript: before the code) so you can click it whenever you want - just be sure to check the console output (F12 in Chrome).

While I was at it, I made a handy regular expression to reduce code down to one line and remove excessive spacing:

([\n\r\t]*|[ \s]{2,})

I use this in Sublime sometimes (Sublime has a regular expression find and replace mode, for those that aren't aware!)


So I discovered that you can link to things in the page by their ID attribute. Honestly, did not know that until yesterday. So here is some better code:

(function(){var e=document.createElement("style");e.type="text/css";e.innerHTML=".anchor_expose_hl { background-color: #ff0 !important; }";document.getElementsByTagName("head")[0].appendChild(e);var t=["h1","h2","h3","h4","h5","h6","span","p","a"];var n=["name","id"];var r="";for(var i in t){for(var s in n){r+=t[i]+"["+n[s]+"],"}}r=r.replace(/,$/,"");var o=document.querySelectorAll(r);var"","anchors","width=400,height=400,resizeable,scrollbars");var e=document.createElement("style");e.type="text/css";e.innerHTML="li:hover { background-color: #ff0 !important; }";u.document.getElementsByTagName("head")[0].appendChild(e);var a=document.createElement("h1");a.innerHTML="Anchors for "+document.title;var f=document.createElement("ul");for(var i in o){if(o.hasOwnProperty(i)&&(o[i].id||o[i].name)){v=!o[i].id?o[i].name:o[i].id;var l=o[i].name?"name":"id";var c=o[i].tagName;var h=o[i].textContent||o[i].innerText||"";var p=document.createElement("li");var d={tn:c,att:l,v:v,w:u};p.onmouseover=function(){var e=this.w.opener.document.querySelector("["+this.att+"="+this.v+"]");e.classList.add("anchor_expose_hl");e.scrollIntoView()}.bind(d);p.onmouseout=function(){this.w.opener.document.querySelector("["+this.att+"="+this.v+"]").classList.remove("anchor_expose_hl")}.bind(d);p.innerHTML='<a href="'+location.href+"#"+v+'" target="_blank">'+v+"</a> - "+(h!=""?h:"<i>No link text</i>");f.appendChild(p);console.log("#"+v+" - "+(h!=""?h:""))}}u.document.body.appendChild(a);u.document.body.appendChild(f)})()

Follow your heart and live the dream <3

Thu Jul 04, 2013 10:40 am 
 Profile E-mail  
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 

All times are UTC

Who is online

Users browsing this forum: No registered users and 1 guest

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Karma functions powered by Karma MOD © 2007, 2009 m157y