1

I have two code examples that use .replace. One doesn't work and I would like to understand why.

This doesn't work:

var code = document.body.innerHTML;
code=code.replace(/11/g,"22");
code=code.replace(/any/g,"anything");

But, this does:

document.body.innerHTML=document.body.innerHTML.replace(/11/g,"22");
document.body.innerHTML=document.body.innerHTML.replace(/any/g,"anything");
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
Reza Fahmi
  • 270
  • 4
  • 11
  • What do you mean with: This code works. Is it shown on your page. then I suggest to assign document.body.innerHTML = code, Replace creates new strings and does not change the document.body.innerHTML variable – Peter Paul Kiefer May 23 '15 at 23:27
  • In you first example, `code` does not hold a reference to `document.body.innerHTML` but holds it's value. Therefore the two lines that follow do not change the value of `document.body.innerHTML` – tomasbasham May 23 '15 at 23:28
  • JavaScript is [pass by value](https://en.wikipedia.org/wiki/Evaluation_strategy#Call_by_value). Assigning a new value to variable won't magically change the value of another variable or object property (exceptions: global and `with` scope). – Felix Kling May 23 '15 at 23:28
  • @FelixKling JavaSript uses pass by reference. If you pass an object variable to a function and change the object in the function the outer object will be changed too because it is the same object. With pass by value the inner object would be a copy of the outer object and changing the inner object would not affect the outer object. – Peter Paul Kiefer May 23 '15 at 23:36
  • @Peter: You are confusing pass **by** reference with passing **a** reference (a rather common mistake I'm afraid). If JavaScript was pass *by* reference, then `var foo = bar; bar = 42; console.log(foo);` would print `42`. Have a look at https://en.wikipedia.org/wiki/Evaluation_strategy. – Felix Kling May 23 '15 at 23:37
  • @Peter: So to be clear, the fact that JavaScript uses references for objects doesn't make it pass-by-reference. – Felix Kling May 23 '15 at 23:48
  • @FelixKling Yep, you are right. Primitives and string are pass by by value with no doubt. But in Javascript there are no pointers; so for objects it is not clear. You can not change the content of a string variable but you can change the content of an object.But ok you can not assign an object to the outer variable from inside a function like this is possible in C++ e.g. .Ok, it is not pass by reference. – Peter Paul Kiefer May 23 '15 at 23:55
  • @PeterPaulKiefer Objects are passed by value too. However, that value is a reference. See [JavaScript does not have "pass by reference"](http://whatsthepointy.blogspot.com.es/2013/11/javascript-does-not-have-pass-by.html), by [Pointy](http://stackoverflow.com/users/182668/pointy). – Oriol May 24 '15 at 00:09
  • @Oriol Yes, thats what Felix convinced me and what I meant when I wrote: you can not assign an object to an outer variable by assigning it to the function parameter. – Peter Paul Kiefer May 24 '15 at 09:14

2 Answers2

1

If you use

var code = document.body.innerHTML;

the code is a variable that contains a string, not a reference.

Therefore, modifying code won't magically update document.body.innerHTML.

You could use one of these:

var document.body.innerHTML = document.body.innerHTML
    .replace(/11/g,"22")
    .replace(/any/g,"anything");

var b = document.body; // Reference to an object
b.innerHTML = b.innerHTML
    .replace(/11/g,"22")
    .replace(/any/g,"anything");

However, be aware that innerHTML returns a HTML string, but you can't parse (X)HTML with regex..

Community
  • 1
  • 1
Oriol
  • 274,082
  • 63
  • 437
  • 513
0

It seems normal. Whatever you do with your "code" variable, you need to assign it back to the document at the end. you can work with the variable but at the end, you should add: document.body.innerHTML=code

A.S.H
  • 29,101
  • 5
  • 23
  • 50