Javascript bookmarklet to replace text with link

Question

I have text on an HTML page. You need a bookmarklet (without jQuery) that will find a segment of text using regex, and then replace it with a link to the text as a parameter

Example to:

aaa bbb ccc ddd 

Example after:

 aaa <a href="http:www.whatever.com?bbb">bbb</a> ccc ddd 

Assuming we were looking for "bbb"

Answer 1

This solution will scan the DOM search for text nodes inside the document elements, skipping any elements you want. For example, you probably want to skip <a> tags, as well as <script> tags and others. Thus, you will not replace element nodes or the main functionality of the page.

 (function(){ // don't replace text within these tags var skipTags = { 'a': 1, 'style': 1, 'script': 1, 'iframe': 1 }; // find text nodes to apply replFn to var findKW = function ( el, term, replFn ) { var child, tag; for (var i = el.childNodes.length - 1; i >= 0; i--) { child = el.childNodes[i]; if (child.nodeType == 1) { // ELEMENT_NODE tag = child.nodeName.toLowerCase(); if (!(tag in skipTags)) { findKW(child, term, replFn); } } else if (child.nodeType == 3) { // TEXT_NODE replaceKW(child, term, replFn); } } }; // replace terms in text according to replFn var replaceKW = function ( text, term, replFn ) { var match, matches = []; while (match = term.exec(text.data)) { matches.push(match); } for (var i = matches.length - 1; i >= 0; i--) { match = matches[i]; // cut out the text node to replace text.splitText(match.index); text.nextSibling.splitText(match[1].length); text.parentNode.replaceChild(replFn(match[1]), text.nextSibling); } }; var replTerm = prompt('Please enter term to replace'); findKW( document.body, // using \\b to only replace when the term is the whole word // eg if term is "bbb" then "aabbbccc" will not match new RegExp('\\b(' + replTerm + ')\\b', 'g'), // your replacement function, change URL accordingly function (match) { var link = document.createElement('a'); link.href = 'http://google.com/#q=' + match; link.target = '_blank'; link.innerHTML = match; return link; } ); }()); 

Here it is minimized in the form of a bookmarklet:

 javascript:(function(){var a={a:1,style:1,script:1,iframe:1};var b=function(d,e,f){var g,h;for(var i=d.childNodes.length-1;i>=0;i--){g=d.childNodes[i];if(g.nodeType==1){h=g.nodeName.toLowerCase();if(!(h in a)){b(g,e,f)}}else if(g.nodeType==3){c(g,e,f)}}};var c=function(a,b,c){var d,e=[];while(d=b.exec(a.data)){e.push(d)}for(var f=e.length-1;f>=0;f--){d=e[f];a.splitText(d.index);a.nextSibling.splitText(d[1].length);a.parentNode.replaceChild(c(d[1]),a.nextSibling)}};var d=prompt("Please enter term to replace");b(document.body,new RegExp("\\b("+d+")\\b","g"),function(a){var b=document.createElement("a");b.href="http://google.com/#q="+a;b.target="_blank";b.innerHTML=a;return b})})() 

Copy this to your bookmark and try on any page! Note: the search is case sensitive, but you can add the "i" flag to RegExp to prevent this.

Answer 2

The simplest regular expression:

 document.body.innerHTML = document.body.innerHTML.replace(/bbb/ , '<a href="http://Google.com">bbb</a>'); 

It's better:

 document.body.innerHTML = document.body.innerHTML.replace(/(bbb)/ , '<a href="http://Google.com">$1</a>'); 

Best:

 var srch = "bbb"; var rg = new RegExp("("+srch+")"); document.body.innerHTML = document.body.innerHTML.replace(rg , '<a href="http://Google.com">$1</a>'); 

Brackets in regexp mean a consistent group. "$ 1" in the second argument is the first matched group.