JavaScript developers frequently have to replace parts of text on a webpage. Sometimes it is a hassle, as there are multiple small pieces of text that need to be replaced inside of a larger element (such as numbers or madlibs). Today's code snippet finds each var
node inside of a parent element and returns an object with a substitute
function. This function simplifies replacing the content inside the var
elements.
Getting started…
Create HTML markup with several var
elements that need their content replaced:
<div id="id_test"> My name is <var class="name">INSERT NAME HERE</var>. I enjoy <var class="activity">INSERT ACTIVITY HERE</var>. I like to play <var class="sport">INSERT SPORT HERE</var>. </div>
How to do it…
Here is a YUI 3 version of a function that finds all var
elements inside of a node and returns an object with a substitution function:
function build_replacement_object(elNode) { var elVars = {}; elNode.all('var').each(function(el, i) { if (el.get('className')) { elVars[el.get('className')] = el; } elVars[i] = el; }); return { substitute: function(o, value) { if (elVars[o]) { elVars[o].setContent(value); } } }; }
Here is the same function, using Just Plain JavaScript (JPJS):
function build_replacement_object(elNode) { var elVars = {}, elNodes = elNode.getElementsByTagName('var'), i = 0, j = elNodes.length, el; for (; i < j; i += 1) { el = elNodes[i]; if (el.className) { elVars[el.className] = el; } elVars[i] = el; } return { substitute: function(o, value) { if (elVars[o]) { elVars[o].innerHTML = value; } } }; }
You can index the var
element to be replaced by the order they appear in the DOM:
// YUI 3 signature, requires a Y.Node instance to be passed into function var o = build_replacement_object(Y.one('#id_test')); o.substitute(0, 'Matt Snider'); o.substitute(1, 'Video Games'); o.substitute(2, 'Soccer');
Or you can replace using the class attribute value of the var
elements:
// JPJS, requires an HTML element var o = build_replacement_object(document.getElementById('id_test')); o.substitute('name', 'Matt Snider'); o.substitute('activity', 'Video Games'); o.substitute('sport', 'Soccer');
How it works&hellips;
Each version of the build_replacement_object
function simply finds all the var
elements in the descending DOM tree and creates a map of them, keyed by an index of the order they appear and any class that might be applied. The returned object has a substitute
function that requires a key or index as the first argument and a string as the second. When used, the substitute
function replaces the innerHTML
of the matching var
element with the replacement text.