Using Javascript to replace rendered HTML

If you want to replace HTML in a rendered page client side, you may wish to use something like the code below. It is particularly useful in a management system where it is difficult to edit the source code. Replacing the html client side can be a good work around.

Put this function in your header:

<script type=”text/javascript”>
function findAndReplace(searchText, replacement, searchNode) {
if (!searchText || typeof replacement === ‘undefined’) {
// Throw error here if you want…
return;
}
var regex = typeof searchText === ‘string’ ?
new RegExp(searchText, ‘g’) : searchText,
childNodes = (searchNode || document.body).childNodes,
cnLength = childNodes.length,
excludes = ‘html,head,style,title,link,meta,script,object,iframe’;
while (cnLength–) {
var currentNode = childNodes[cnLength];
if (currentNode.nodeType === 1 &&
(excludes + ‘,’).indexOf(currentNode.nodeName.toLowerCase() + ‘,’) === -1) {
arguments.callee(searchText, replacement, currentNode);
}
if (currentNode.nodeType !== 3 || !regex.test(currentNode.data) ) {
continue;
}
var parent = currentNode.parentNode,
frag = (function(){
var html = currentNode.data.replace(regex, replacement),
wrap = document.createElement(‘div’),
frag = document.createDocumentFragment();
wrap.innerHTML = html;
while (wrap.firstChild) {
frag.appendChild(wrap.firstChild);
}
return frag;
})();
parent.insertBefore(frag, currentNode);
parent.removeChild(currentNode);
}
}
</script>

Run the function after the page has loaded, include the text to replace as a variable (Current Text, New Text):

findAndReplace(‘Current Text’, ‘New Text’);

Leave a Reply

Your e-mail address will not be published. Required fields are marked *