Ответ, представленный Андреасом Джосасом, довольно хорош. Однако в коде было несколько ошибок, когда поисковый запрос появлялся несколько раз в одном и том же текстовом узле. Вот решение с исправленными ошибками, и, кроме того, вставка включена в matchText для облегчения использования и понимания. Теперь в обратном вызове создается только новый тег, который возвращается обратно в matchText.
Обновлена функция matchText с исправлениями ошибок:
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;
};
Использование:
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;
});
Если вы хотите вставить теги привязки (ссылки) вместо тегов span, измените элемент create на «a» вместо «span», добавьте строку, чтобы добавить атрибут href к тегу, и добавьте «a» в excludeElements. список, чтобы ссылки не создавались внутри ссылок.
person
d'Artagnan Evergreen Barbosa
schedule
27.03.2015
<span>lol</span>
должен работать, я полагаю. (Вместо этого вставьте в HTML, тогда можно будет легко попасть в текстовый узел, я так думаю). - person Mr_Green   schedule 21.05.2013