Как я могу использовать jQuery для моделирования/parts/всех экземпляров определенного слова?
Проверьте эту статью:
А Визуальное Объяснение Соединений SQL
Внутреннее объединение:
Левое Внешнее объединение:
Правильное Внешнее объединение:
4 ответа
Чтобы сделать это надежно, вам придется перебирать каждый элемент в документе в поисках текстовых узлов и искать в них текст. (Это то, что делает плагин, указанный в вопросе.)
Вот простой JavaScript / DOM, который позволяет сопоставить шаблон RegExp. На самом деле jQuery здесь не очень полезен, поскольку селекторы могут выбирать только элементы, а селектор ': contains' рекурсивен, поэтому не слишком полезен для нас.
// Find text in descendents of an element, in reverse document order
// pattern must be a regexp with global flag
//
function findText(element, pattern, callback) {
for (var childi= element.childNodes.length; childi-->0;) {
var child= element.childNodes[childi];
if (child.nodeType==1) {
findText(child, pattern, callback);
} else if (child.nodeType==3) {
var matches= [];
var match;
while (match= pattern.exec(child.data))
matches.push(match);
for (var i= matches.length; i-->0;)
callback.call(window, child, matches[i]);
}
}
}
findText(document.body, /\bBuyNow\b/g, function(node, match) {
var span= document.createElement('span');
span.className= 'highlight';
node.splitText(match.index+6);
span.appendChild(node.splitText(match.index+3));
node.parentNode.insertBefore(span, node.nextSibling);
});
Регулярные выражения и replace () приходят на ум. Что-то вроде
var text = $([selector]).html();
text = text.replace(/Now/g,'<strong>Now<\strong>');
$([selector]).html(text);
Предупреждение при использовании для этого html () . Во-первых, существует возможность замены совпадающих строк в атрибутах href элементов и других атрибутах, что может привести к некорректной работе страницы. Можно было бы написать более качественное регулярное выражение для преодоления некоторых потенциальных проблем, но производительность может пострадать (я не гуру регулярных выражений). Во-вторых, использование html () для замены содержимого приведет к потере несериализуемых данных, таких как обработчики событий, привязанные к заменяемой разметке элементов, данные формы и т. Д. Написание функции для нацеливания только на текстовые узлы может быть лучшим / безопасным вариантом, это просто зависит от сложности страниц.
Если у вас есть доступ к файлам HMTL, вероятно, было бы лучше найти и заменить слова, которые они хотят изменить внешний вид в файлах, если содержимое статический. В NotePad ++ параметр Найти в файлах в большинстве случаев эффективен для этого задания.
Использование предложения SingleShot и использование с CSS class предоставит большую гибкость, чем использование элемента .
Для этого я написал небольшой плагин. Взгляните на мой ответ на аналогичный вопрос.
Вместо того, чтобы загружать плагин, предложенный в принятом ответе, я настоятельно рекомендую вам использовать плагин, который я написал - он намного быстрее.
var Run=Run || {};
Run.makestrong= function(hoo, Rx){
if(hoo.data){
var X= document.createElement('strong');
X.style.color= 'red'; // testing only, easier to spot changes
var pa= hoo.parentNode;
var res, el, tem;
var str= hoo.data;
while(str && (res= Rx.exec(str))!= null){
var tem= res[1];
el= X.cloneNode(true);
el.appendChild(document.createTextNode(tem));
hoo.replaceData(res.index, tem.length,'');
hoo= hoo.splitText(res.index);
str= hoo.data;
if(str) pa.insertBefore(el, hoo);
else{
pa.appendChild(el);
return;
}
}
}
}
Run.godeep= function(hoo, fun, arg){
var A= [];
if(hoo){
hoo= hoo.firstChild;
while(hoo!= null){
if(hoo.nodeType== 3){
if(hoo.data) A[A.length]= fun(hoo, arg);
}
else A= A.concat(arguments.callee(hoo, fun, arg));
hoo= hoo.nextSibling;
}
}
return A;
}
//test
**Run.godeep(document.body, Run.makestrong,/([Ee]+)/g);**