Я должен был сделать это некоторое время назад.На самом деле я ответил на похожий вопрос здесь: javascript: найдите строки в dom и выделите их (мне понадобилось время, чтобы найти его).
Вот что я использую для создания динамической подсказки:
// keyword : tooltip
keywords = {
'hello world' : 'a common first example program',
'goodbye cruel world' : 'the opposite of hello world'
};
function insertTooltips (domNode) {
if (domNode.nodeType === Node.ELEMENT_NODE) { // We only want to scan html elements
var children = domNode.childNodes;
for (var i=0;i<children.length;i++) {
var child = children[i];
// Filter out unwanted nodes to speed up processing.
// For example, you can ignore 'SCRIPT' nodes etc.
if (
child.nodeName != 'span' ||
child.className != 'tooltip_span'
) {
insertTooltips(child); // Recurse!
}
}
}
else if (domNode.nodeType === Node.TEXT_NODE) { // Process text nodes
var text = domNode.nodeValue;
// This is another place where it might be prudent to add filters
for (var i in keywords) {
if (keywords.hasOwnProperty(i)) {
var match = text.indexOf(i); // you may use search instead
if (match != -1) {
// This is how you wrap the keyword in a span:
// create a span:
var span = document.createElement('SPAN');
// split text into 3 parts: before, mid and after
var mid = domNode.splitText(match);
mid.splitText(i.length);
// then assign mid part to span
mid.parentNode.insertBefore(span,mid);
mid.parentNode.removeChild(mid);
span.appendChild(mid);
// now we can assign a mouseover event handler to the span
span.onmouseover = function(){
showToolTip(keywords[i]);
}
// give the span a class name to prevent accidental
// recursion into it:
span.className = 'tooltip_span';
}
}
}
}
}
Реализация функции showTooltip оставлена в качестве упражнения для читателя.
Идея в основном заключается в использовании DOM-манипуляции для динамического поиска и переноса ключевых слов в промежутки, а затемназначить указатель мыши (или указатель мыши до вас) обработчику для отображения всплывающей подсказки.На моем веб-сайте ключевое слово / хэш / объект всплывающей подсказки создается из данных, извлеченных из базы данных.
Это гораздо надежнее, чем пытаться сделать это с помощью регулярного выражения, поскольку предотвращает случайную обработку слов, соответствующих ключевым словам вимя класса, идентификатор и теги скрипта.