Altering page content is not, in general, as simple as replacing the html() markup with regex. All such attempts will fail where there is matched text in the markup itself, can fail when the browser chooses to serialise its DOM in a way that doesn't meet your expectations, and at best, when it does work, still forces you to serialise and re-parse all searched text, which is slow and destroys all non-serialisable information, such as form field values, JavaScript references and event handlers. You can get away with that for simple low-level elements, but against a container like <body> it'd be awful.
Better: instead of hacking at an HTML string, stick with the live DOM nodes, searching for Text nodes that match your requirements and doing the replacements on the straight text node data. Here's some plain JS code to do that (I guess you could put it in a plugin if you wanted.)
// Utility function to find matches in an element's descendant Text nodes,
// calling back a function with (node, match) arguments. The `pattern` can
// be a string, for direct string matching, or a RegExp object (which must
// be a `g`lobal regex.
//
function findText(element, pattern, callback) {
for (var childi= element.childNodes.length; childi-->0;) {
var child= element.childNodes[childi];
if (child.nodeType==1) {
var tag= child.tagName.toLowerCase();
if (tag!=='script' && tag!=='style' && tag!=='textarea')
findText(child, pattern, callback);
} else if (child.nodeType==3) {
var matches= [];
if (typeof pattern==='string') {
var ix= 0;
while (true) {
ix= child.data.indexOf(pattern, ix);
if (ix===-1)
break;
matches.push({index: ix, '0': pattern});
}
} else {
var match;
while (match= pattern.exec(child.data))
matches.push(match);
}
for (var i= matches.length; i-->0;)
callback.call(window, child, matches[i]);
}
}
}
Example usage with a plain string search term:
// Replace “World to” string in element text with <i>-wrapped version
//
var element= $('#construct_version')[0];
findText(element, 'World to', function(node, match) {
var wrap= document.createElement('i');
node.splitText(match.index+match[0].length);
wrap.appendChild(node.splitText(match.index));
node.parentNode.insertBefore(span, node.nextSibling);
});
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
