Найдите все экземпляры "старого" на веб-странице и замените их "новыми", используя букмарклет javascript

Ответ 1

Функция, которая является clobber-proof. Это означает, что это не коснется каких-либо тегов или атрибутов, только текст.

function htmlreplace(a, b, element) {    
    if (!element) element = document.body;    
    var nodes = element.childNodes;
    for (var n=0; n<nodes.length; n++) {
        if (nodes[n].nodeType == Node.TEXT_NODE) {
            var r = new RegExp(a, 'gi');
            nodes[n].textContent = nodes[n].textContent.replace(r, b);
        } else {
            htmlreplace(a, b, nodes[n]);
        }
    }
}

htmlreplace('a', 'r');

Версия прокладок:

javascript:function htmlreplace(a,b,element){if(!element)element=document.body;var nodes=element.childNodes;for(var n=0;n<nodes.length;n++){if(nodes[n].nodeType==Node.TEXT_NODE){nodes[n].textContent=nodes[n].textContent.replace(new RegExp(a,'gi'),b);}else{htmlreplace(a,b,nodes[n]);}}}htmlreplace('old','new');

Ответ 2

Если вы замените innerHtml, вы уничтожите любые домашние события, которые у вас есть на странице. Попробуйте переместить документ, чтобы заменить текст:

function newTheOlds(node) {
    node = node || document.body;
    if(node.nodeType == 3) {
        // Text node
        node.nodeValue = node.nodeValue.split('old').join('new');
    } else {
        var nodes = node.childNodes;
        if(nodes) {
            var i = nodes.length;
            while(i--) newTheOlds(nodes[i]);
        }
    }
}

newTheOlds();

Разделение/объединение происходит быстрее, чем "замена", если вам не требуется сопоставление шаблонов. Если вам требуется сопоставление образцов, используйте "replace" и regex:

node.nodeValue = node.nodeValue.replace(/(?:dog|cat)(s?)/, 'buffalo$1');

Как букмарклет:

javascript:function newTheOlds(node){node=node||document.body;if(node.nodeType==3){node.nodeValue=node.nodeValue.split('old').join('new');}else{var nodes=node.childNodes;if(nodes){var i=nodes.length;while(i--)newTheOlds(nodes[i]);}}}newTheOlds();

Ответ 3

Для старых браузеров потребуется изменить Node.TEXT_NODE на 3 и Node.textContent на Node.nodeValue; поэтому окончательная функция должна читать:

function htmlreplace(a, b, element) {    
    if (!element) element = document.body;    
    var nodes = element.childNodes;
    for (var n=0; n<nodes.length; n++) {
        if (nodes[n].nodeType == 3) { //Node.TEXT_NODE == 3
            var r = new RegExp(a, 'gi');
            nodes[n].nodeValue = nodes[n].nodeValue.replace(r, b);
        } else {
            htmlreplace(a, b, nodes[n]);
        }
    }
}

Ответ 4

Простая строка, которая работает вдоль jQuery:

`javascript:var a = function(){$("body").html($("body").html().replace(/old/g,'new'));return;}; a();`

Без jQuery:

`javascript:function a (){document.body.innerHTML=document.body.innerHTML.replace(/old/g, "new" );return;}; a();`

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

Ответ 5

Еще один рекурсивный подход:

function replaceText(oldText, newText, node){ 
  node = node || document.body; 

  var childs = node.childNodes, i = 0;

  while(node = childs[i]){ 
    if (node.nodeType == Node.TEXT_NODE){ 
      node.textContent = node.textContent.replace(oldText, newText); 
    } else { 
      replaceText(oldText, newText, node); 
    } 
    i++; 
  } 
}

Минимированный букмарклет:

javascript:function replaceText(ot,nt,n){n=n||document.body;var cs=n.childNodes,i=0;while(n=cs[i]){if(n.nodeType==Node.TEXT_NODE){n.textContent=n.textContent.replace(ot,nt);}else{replaceText(ot,nt,n);};i++;}};replaceText('old','new');

Ответ 6

Хорошо, я просто консолидирую некоторые из великих вещей, которые люди вкладывают в один ответ.

Вот код jQuery шестого gear, но сделанный портативный (я исходный jQuery из большой G) и преобразованный в букмарклет:

javascript:var scrEl=document.createElement('script');scrEl.setAttribute('language','javascript');scrEl.setAttribute('type','text/javascript');scrEl.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');function htmlreplace(a,b,element){if(!element)element=document.body;var nodes=$(element).contents().each(function(){if(this.nodeType==Node.TEXT_NODE){var r=new RegExp(a,'gi');this.textContent=this.textContent.replace(r,b);}else{htmlreplace(a,b,this);}});}htmlreplace('old','new');

ПРИМЕЧАНИЕ: "old" может быть либо "строковым литералом", либо "reg [Ee] x".

Собственно, теперь, когда я думаю об этом, шестой гиг - лучший ответ, особенно с моими улучшениями. Я не могу найти ничего, что добавит другие ответы, используя jQuery, чтобы добиться невероятной совместимости с X-браузером. Плюс, я просто слишком ленив. сообщество wiki, Enjoy!

Ответ 7

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

javascript:document.body.innerHTML=document.body.innerHTML.replace( /old/g, "new" );

Ответ 8

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

Я планирую использовать его на странице редактирования базы данных phpmyadmin, которая будет содержать любое количество текстовых полей, заполненных текстом (это то, что мне нужно для поиска и замены). Кроме того, текст для поиска и замены может быть или не быть многострочным, поэтому я добавил параметр "m" в регулярное выражение, а также, поскольку я буду выполнять поиск/замену, который может содержать html, они Часто у них есть котировки/двойные кавычки. например:

Искать:

<img height="76" width="92" src="http://www.gifs.net/Animation11/Hobbies_and_Entertainment/Games_and_Gambling/Slot_machine.gif" /></div>
<div class="rtecenter"> <strong><em><font color="#ff0000">Vegas Baby!<br />
</font></em></strong></div>

и, возможно, заменить ничего (просто удалить весь этот код) или какой-нибудь другой html. Пока это тот букмарклет, который я придумал, (javascript, и особенно букмарклеты - это не то, что я часто использую), однако он ничего не делает для поиска/замены, хотя он действительно делает запрос правильно.

javascript:var%20scrEl=document.createElement('script');scrEl.setAttribute('language','javascript');scrEl.setAttribute('type','text/javascript');scrEl.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');function%20htmlreplace(a,b,element){if(!element)element=document.body;var%20nodes=$(element).contents().each(function(){if(this.nodeType==Node.TEXT_NODE){var%20r=new%20RegExp(a,'gim');this.textContent=this.textContent.replace(r,b);}else{htmlreplace(a,b,this);alert('Done%20processing.');}});}htmlreplace(prompt('Text%20to%20find:',''),prompt('Replace%20with:',''));

У кого-нибудь есть идеи?