Odpowiedź przedstawiona przez Andreasa Josasa jest całkiem dobra. Jednak kod miał kilka błędów, gdy wyszukiwane hasło pojawiało się kilka razy w tym samym węźle tekstowym. Oto rozwiązanie z naprawionymi błędami i dodatkowo wstawka jest uwzględniana w matchText dla łatwiejszego użycia i zrozumienia. Teraz tylko nowy znacznik jest tworzony w wywołaniu zwrotnym i przekazywany do matchText przez zwrot.
Updated funkcja matchText z poprawkami:
var matchText = function(node, regex, callback, excludeElements) {
excludeElements || (excludeElements = ['script', 'style', 'iframe', 'canvas']);
var child = node.firstChild;
while (child) {
switch (child.nodeType) {
case 1:
if (excludeElements.indexOf(child.tagName.toLowerCase()) > -1)
break;
matchText(child, regex, callback, excludeElements);
break;
case 3:
var bk = 0;
child.data.replace(regex, function(all) {
var args = [].slice.call(arguments),
offset = args[args.length - 2],
newTextNode = child.splitText(offset+bk), tag;
bk -= child.data.length + all.length;
newTextNode.data = newTextNode.data.substr(all.length);
tag = callback.apply(window, [child].concat(args));
child.parentNode.insertBefore(tag, newTextNode);
child = newTextNode;
});
regex.lastIndex = 0;
break;
}
child = child.nextSibling;
}
return node;
};
Zastosowanie:
matchText(document.getElementsByTagName("article")[0], new RegExp("\\b" + searchTerm + "\\b", "g"), function(node, match, offset) {
var span = document.createElement("span");
span.className = "search-term";
span.textContent = match;
return span;
});
Jeśli pragniesz, aby wstawić kotwicę (link) Tagi zamiast znaczniki SPAN, zmień element tworzenia być „ "zamiast" span ", dodaj linię, aby dodać atrybut href do tagu, i dodaj" a "do listy excludeElements, aby linki nie były tworzone wewnątrz odnośników.
w tym przypadku trzeba będzie repace węzeł tekstowy z treścią HTML –
@ArunPJohny Jak mam to zrobić? – alt
@ JacksonGariety - należy zastąpić węzeł tekstowy nowym elementem DOM span i węzłami tekstowymi lub zmodyfikować jego właściwość innerHTML nadrzędnej. Spróbuj, po czym próbujesz. – RobG