Как я могу использовать jQuery для стиля / частей / всех экземпляров определенного слова?

Question

Необычная ситуация. У меня есть клиент, давайте назовем его «BuyNow». Они хотели бы, чтобы каждый экземпляр их имени во всей копии их сайта был стилизован как «Купить Сейчас », где вторая половина их имени выделена жирным шрифтом.

Мне бы очень не хотелось тратить день на добавление тегов ко всей копии. Есть ли хороший способ сделать это с помощью jQuery?

Я видел плагин выделения для jQuery, и он очень близок, но мне нужно выделить только вторую половину этого слова.

Answer 1

Чтобы сделать это надежно, вам придется перебирать каждый элемент в документе, искать текстовые узлы и искать текст в них. (Это то, что делает плагин, отмеченный в вопросе.)

Вот простой JavaScript / DOM, который позволяет сопоставлять шаблон RegExp. Здесь jQuery не особо помогает, поскольку селекторы могут выбирать только элементы, а селектор «: содержит» рекурсивен, поэтому не слишком полезен для нас.

// 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);
});

Answer 2

Регулярные выражения и replace() приходят на ум. Что-то вроде

var text = $([selector]).html();
text = text.replace(/Now/g,'<strong>Now<\strong>');
$([selector]).html(text);

Слово предостережения при использовании html() для этого. Во-первых, существует возможность замены совпавших строк в атрибутах href элементов <a> и других атрибутах, которые могут привести к неправильной работе страницы. Можно было бы написать лучшее регулярное выражение, чтобы преодолеть некоторые потенциальные проблемы, но производительность может пострадать (я не гуру регулярных выражений). Во-вторых, использование html() для замены содержимого приведет к потере несериализуемых данных, таких как обработчики событий, связанные с заменой разметки элементов, данные формы и т. Д. Написание функции, предназначенной только для текстовых узлов, может быть лучше / безопаснее, это зависит только от сложности страниц.

Если у вас есть доступ к файлам HMTL, вероятно, было бы лучше найти и заменить слова, для которых они хотят изменить внешний вид в файлах, если содержимое статично. NotePad ++ Найти в файлах * В большинстве случаев для этой работы выполняется опция 1011 *.

Использование предложения SingleShot и использование <span> с классом CSS обеспечат большую гибкость, чем использование элемента <strong>.

Answer 3

Я написал небольшой плагин, чтобы сделать это. Взгляните на мой ответ на похожий вопрос.

Вместо того, чтобы загружать плагин, предложенный в принятом ответе, я настоятельно рекомендую использовать плагин, который я написал - он намного быстрее.

Answer 4

Это не скрипт jQuery, а чистый javaScript, я полагаю, его можно немного изменить. Link .

Answer 5

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);**