const __getTextNodesByContent = (target, pattern) => {
// get iterator
const textNodeIterator = document.createNodeIterator(
// search for
target,
// enumerate for
NodeFilter.SHOW_TEXT,
// filter
{
acceptNode: node => pattern.test(node.textContent) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT,
}
);
// into array
const ret = [];
let current;
while (current = textNodeIterator.nextNode()) {
ret.push(current);
}
return ret;
};
const __replaceTextNodes = (target, pattern, replace) => {
// get the list of textNodes that contains /pattern/
const matchedTextNodes = __getTextNodesByContent(target, pattern);
// for each textnode
const ret = [];
for (const node of matchedTextNodes) {
// replace each part of textNode
let currentNode = node;
let matches;
while (pattern.lastIndex = 0, matches = pattern.exec(currentNode.textContent)) {
// separate [currentNode|<before><match><after>]
// into [currentNode|<before>] [nextNode|<match><after>]
const nextNode = currentNode.splitText(matches.index);
// slice <match> part; [currentNode|<before>] [nextNode|<after>]
nextNode.textContent = nextNode.textContent.slice(matches[0].length);
// insert surround <match> part as a new sibling;
// [currentNode|<before>] [surroundNode|<match>] [nextNode|<after>]
const surroundNode = replace(matches[0]);
nextNode.parentElement.insertBefore(surroundNode, nextNode);
// store reference
ret.push(surroundNode);
// next
currentNode = nextNode;
}
}
// return a list of surround elements
return ret;
};
//
// for example
//
const $target = document.body;
const targetPattern = /Lorem|massa|ridiculus|pellentesque/gi;
const surroundElements = __replaceTextNodes($target, targetPattern, text => {
// surround with <span>, colored with red, add title attribute
const el = document.createElement('span');
el.textContent = text;
el.style.color = 'red';
el.title = 'surround with <span>, text content is "' + text + '";';
return el;
});
// event handler filterd by surround elements
window.addEventListener('click', e => {
if (surroundElements.includes(e.target)) {
console.log('click', e.target);
}
});
// or for each surround elements
/*
for (const se of surroundElements) {
se.addEventListener(evt, fn);
}
*/
<h1>Lorem Lorem ipsum dolor sit amet consectetuer adipiscing
elit</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa
<strong>strong</strong>. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus
mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis
enim. Donec pede justo, fringilla vel, aliquet nec,
vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo.</p>
<h2>Lorem ipsum dolor sit amet consectetuer adipiscing
elit</h2>
<h3>Aenean commodo ligula eget dolor aenean massa</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem.</p>
<ul>
<li>Lorem ipsum dolor sit amet consectetuer.</li>
<li>Aenean commodo ligula eget dolor.</li>
<li>Aenean massa cum sociis natoque penatibus.</li>
</ul>