ansaurus

Question

replace character (space with  ) across whole webpage using javascript/jQuery

Answer 1

+1 A:

function replaceText(node)
{
  var current = node.nodeValue;
  var replaced = current.replace(searchpattern, replacepattern);
  node.nodeValue = replaced;
}
function traverse(node)
{
  var children = node.childNodes;
  var childLen = children.length;
  for(var i = 0; i < childLen; i++)
  {
    var child = children.item(i);
    if(child.nodeType == 3)//or if(child instanceof Text)
      replaceText(child);
    else
      traverse(child);
  }
}
function replaceAll()
{
  traverse(document.body);
}

Call replaceAll() from body's onload.

<body onload="replaceAll()">

Amarghosh 2010-02-18 07:22:38

thank you! maybe better to put it all including replaceAll() call into $(document).ready(function() { // do stuff when DOM is ready });instead of using <body onload="replaceAll()"> ?

Josef Richter 2010-02-18 07:28:52

I don't know jQuery, but if that's how you do `onload` in jquery, ya, you can do that.

Amarghosh 2010-02-18 07:57:02

so this solution works very well and I finally found the correct regex is current.replace(/(\s\w)\s/g,"$1\xA0"); thank you

Josef Richter 2010-02-19 09:54:32

Answer 2

+2 A:

you could try something like this:

$('body').contents().filter(function(){ 
     return this.nodeType == 3;
}).each(function(){
   this.nodeValue = this.nodeValue.replace(/\s\w(?=\s)/,"$1&nbsp;");
});

Basically we grab the body element and get its contents - the contents() method will grab text nodes as well as elements which is what we want. Then we filter on nodeType reducing the set to only text nodes. then we do the regex replace.

prodigitalson 2010-02-18 07:24:12

this looks even better :-) exactly a kind of "hack" I was looking for, especially this filter by nodeType - didn't know that. thanks

Josef Richter 2010-02-18 07:30:32

Please note i had my nodeType wrong.. it was `1` when it should have been `3` - i have corrected my answer.

prodigitalson 2010-02-18 07:32:51

thanks. it still doesn't seem to work for me. the this.nodeValue is void as I can see in js console. any idea?

Josef Richter 2010-02-18 07:42:52

before or after the replace? try breaking it out like `var newText = this.nodeValue.replace(/\s\w(?=\s)/,"$1 "); this.nodeValue = newText;` other than tha try alerting the `nodeName` and make sure its `TEXT`.

prodigitalson 2010-02-18 07:45:38

Will this really allow you to insert HTML as the OP wants to do? Since you're only changing the nodeValue of a text node, won't it just insert the text " " rather than actually inserting a HTML entity?

Martin 2010-02-18 07:52:47

before the replace (thus after it as well). it returns 'nodeType = 3' but 'nodeValue' is void.

Josef Richter 2010-02-18 07:55:47

I've tried the other solution below by Amarghosh and it actually works (although I am not exactly sure why). but as Martin suggests, it really does replace it with text "$1 " instead of inserting HTML entity :-(

Josef Richter 2010-02-18 08:01:29

@MArtin: Good Point. I didnt even think of that!

prodigitalson 2010-02-18 14:46:07

@Martin To insert non-breaking space to a text node, you can use `"\xA0"` instead of `" "`

Amarghosh 2010-02-19 04:23:00

I finally realized the difference between this solution and the other by Amarghosh - the loop needs to dig deeper in the DOM tree. this way it seems it doesn't replace anything if I have e.g. <div><span>whatever string</span></div> because it looks for text within <div> tag but not within the nested <span>. so we probably need separate function to be called recursively. anyone has some nice way to do it?

Josef Richter 2010-02-19 09:59:42

ansaurus

tags:

views:

answers:

replace character (space with  ) across whole webpage using javascript/jQuery

related questions

ansaurus

tags:

views:

answers:

replace character (space with &nbsp;) across whole webpage using javascript/jQuery

related questions

replace character (space with ) across whole webpage using javascript/jQuery