Replacing HTML with Javascript in a way that is executable in a browser

Question

I have no Javascript experience at all. What I want is to replace a single instance of a block of text in a page's HTML - how can I do this?

30 minutes of reading around has brought me this:

javascript:document.body.innerHTML = document.body.innerHTML.replace("this","that");

Am I even close?

It is close. But where did you put this line? You will need to execute it, how did you (try to) do that? Maybe you should read some further. JavaScript is a totally diffent concept from HTML (it is actual programming), and you don't usually learn it in half an hour. — GolezTrol, Oct 01 '11 at 08:04
The Firefox address bar. I'm not making an effort to learn it, honestly, I just have a use for this script in mind. — Roberto C., Oct 01 '11 at 08:07
I suppose that he has that line in example into onclick="". Something like that onclick="javascript:document.body.innerHTML = 'that'" — KodeFor.Me, Oct 01 '11 at 08:08
FWIW "`javascript:` URLs" don't run in the page's context since FF6. — Felix Kling, Oct 01 '11 at 09:35

score 2 · Answer 1 · answered Oct 01 '11 at 08:06

2

With no experiance at all I recommend you take a look at jQuery. With jQuery you can do:

Given:

<p>block of text</p>

jQuery:

$('p').text("some other block of text");

answered Oct 01 '11 at 08:06

Rickard

2,325
13
22

Ha with all my exp with jquery I woulda thought you would have to do `$('p').html('the text');` +1 for teaching me something new lol – Atticus Oct 01 '11 at 08:08
1

@Atticus `$.html()` differs from `$.text()`, they both have their own applicability. – Shef Oct 01 '11 at 08:12
@Shef cool, ill have to go read up on that, im assumig text() will insert / get plain text, no code – Atticus Oct 01 '11 at 17:26
@Atticus [jQuery: text() vs html()?](http://stackoverflow.com/questions/1910794/jquery-text-vs-html) will give you a rough idea. The main observable difference is that `$.text()` will encode special chars to their entities, thus making it possible for the HTML markup to be displayed not rendered. – Shef Oct 01 '11 at 17:32

score 1 · Accepted Answer · answered Oct 01 '11 at 08:02

1

javascript:document.body.innerHTML = "that"

answered Oct 01 '11 at 08:02

KodeFor.Me

13,069
27
98
166

Also, note that I want to replace a block of text within innerHTML, not innerHTML itself. – Roberto C. Oct 01 '11 at 08:05
@RobertoC.: Assigning a value to innerHTML *is* the way to replace text in an element. Any element, including `body`. (Well, it's *a* way. There are many others.) – Cameron Skinner Oct 01 '11 at 08:08
Then you have to describe what you want to do. The above example describes exactly that thing. That you want to replace the body content it self. – KodeFor.Me Oct 01 '11 at 08:09
For better solution show us the HTML part you want to change (ie:
This is what I like to change
) and we will show you many options ;) That's the best – KodeFor.Me Oct 01 '11 at 08:18

score 1 · Answer 3 · answered Oct 01 '11 at 08:09

1) If it is part of a URL, such as <a href="...">, then you need
javascript:void(document.body.innerHTML = document.body.innerHTML.replace("this","that"));

2) If it is part of an event, such as <button onClick="...">, then you need
document.body.innerHTML = document.body.innerHTML.replace("this","that");

3) If you are trying to replace ALL instances of "this" with "that", and not just the first, then you need
... .replace(/this/g,"that")

GolezTrol · Answer 4 · 2011-10-01T08:22:10.327

You cannot just execute that script in the address bar. It needs to operate on a document, but there is nothing to replace there. Executing javascript from the address bar will give you a new empty document on which that code operates.

Even if you try to load a document from javascript, the rest of your script gets executed first. Try this:

javascript:window.location='http://www.google.com';alert(document.innerHTML);

You'll see that the alert pops up before the page is loaded, and it shows 'undefined'.

Even when you try binding to the onload event of the document or the window it won't work. Probably because they are reset afterwards.

javascript:window.location='http://www.google.com';window.onload=function(){alert(document.innerHTML);};

And it makes sense; if this would work, you could manipulate the next page when jumping to that page, thus making it possible to inject javascript in a page you link to. That would be a big security issue, so it's a good thing this doesn't work.

Replacing HTML with Javascript in a way that is executable in a browser

4 Answers4