Search code examples
javascripthtmluserscripts

Replace html in userscript w/o breaking anything?

The below is in my userscript. It doesnt do the alert because when i replace the html i am clobbering it somehow.

How do i replace regular text in a div or span that is literally domain[dot]com so it will appear as domain.com? Well the below works but breaks code running after and other userscripts.

$(function() {
    var html = $('body').html();
    var res=html.replace(/\[dot\]/g, ".");
    $('body').html(res);
    //doesnt call, however html is replaced
    alert('a'); 
});
Solution

  • Replace the text in the page instead of replacing in the entire HTML. If you get the entire HTML and put it back, that will make it reparse all the code and put it back as it was when initially loaded, whcih means that any events bound to any elements are gone.

    Use a recursive function to find the text nodes in the document and do the replacing on the text in each node:

    function replaceText(node, replacer) {
  var n = node.childNodes;
  for (var i = 0; i < n.length; i++) {
    if (n[i].nodeType == 3) {
      n[i].nodeValue = replacer(n[i].nodeValue);
    } else {
      replaceText(n[i], replacer);
    }
  }
}

$(function(){

  replaceText(document.body, function(s){
    return s.replace(/\[dot\]/g, '.');
  });

});

    Demo: http://jsfiddle.net/Guffa/ex83P/

    As you see, there is no jQuery in the function, because jQuery only deals with elements, there are no methods to deal with text nodes.