Getting HTML source of a page by JavaScript and overwriting it

Question

I'm writing an extension for browser using Javascript. How do I get the whole HTML source code and re-write that?

I need to change some words inside that source and reopen that page.

You can use `document.getElementsByTagName("html")[0].innerHTML` to read the source and `document.write` for rewrite the page, if that's what you ask. However, I would recommend you to use something like `document.getElementById("idOfTheElement").innerHTML="new string"` to change a few words in a document than rewriting the whole page (if you know the id/class of the element). — Petr R., Jul 08 '13 at 15:14
I beg to disagree with the answers below. You should try doing an string replacement at the text node level without forcing a complete page (especially CSS) reload. [This is actually very simple and I will leave a small snippet example although it is not pure JS](https://github.com/aeurielesn/jQuery.fn/blob/master/%24.fn.replace/%24.fn.replace.js) — Alexander, Jul 08 '13 at 15:23
Thank you very much. So, I'm gonna do this: I will get the whole source by `MyString=document.getElementsByTagName("html")[0].innerHTML` and then apply my finction to change it, and rewrite the code by: `document.documentElement.innerHTML = changeString (Mystring); `will it work? — Hurrem, Jul 08 '13 at 15:24
@Alexander actually you're right, I need to change the text only, but I need to change the whole text, from title page till the end. I dodn't understand TEXT_NODE, what is that? — Hurrem, Jul 08 '13 at 15:35
This question is rather vague. Can you explain the problem in more detail? — Anderson Green, Jul 08 '13 at 16:04

score 3 · Answer 1 · edited May 23 '17 at 11:58

3

In javascript you could try something like:

var source = document.documentElement.outerHTML;

...and to get the doctype use:

var doctype = document.doctype;

I also found this post regarding doing the same thing in a Chrome extension if this helps:

edited May 23 '17 at 11:58

Community

answered Jul 08 '13 at 15:17

jrthib

score 2 · Answer 2 · answered Jul 08 '13 at 15:13

2

Try something like this to get the page source:

document.documentElement.innerHTML

And this to change it:

document.documentElement.innerHTML = '<body>I like pie</body>'

document.documentElement is the <html> ... </html> element on the page, and innerHTML will give is the HTML of it.

answered Jul 08 '13 at 15:13

tckmn

what if I want to start from the head? the whole page – Hurrem Jul 08 '13 at 15:32
@hurremdev Unfortunately that is not possible with JavaScript. – tckmn Jul 08 '13 at 15:33
@hurremdev Yes, the title is in the `head` element. The `html` element contains the `head`. – tckmn Jul 08 '13 at 15:41

Petr R. · Answer 3 · 2013-07-08T16:10:49.827

You can get the source of the whole page with:

oldSource = document.getElementsByTagName("html")[0].innerHTML;

And then replace the entire page with:

document.write(newSource);

Or, if you want to replace few elements on the page, use one of the following:

If you know the id of the element:

oldText = document.getElementById("idOfElement").innerHTML;
document.getElementById("idOfElement").innerHTML = newText;

If you know the class of the element:

oldText = document.getElementsByTagName("classOfElement")[0].innerHTML;
document.getElementsByTagName("classOfElement")[0].innerHTML = newText;

(where 0 means you're looking for the first element with the specificed classname on the page)

If you know the tag name of the element:

oldText = document.getElementsByClassName("tagName")[0].innerHTML;
document.getElementsByClassName("tagName")[0].innerHTML = newText;

(where 0 means you're looking for the first element with the specificed tag name on the page)

Or, you can use jQuery selectors, for example:
```
oldText = $("#idOfElement").html();
oldText = $(".classOfElement").html();
oldText = $("tagName:nth-child(1)").html();

$("#idOfElement").html(newText);
$(".classOfElement").html(newText);
$("tagName:nth-child(1)").html(newText);
```
Where :nth-child(1) means you're looking for the first element with the specificed tag name on the page. You can also use this when searching for classes, if there are multiple element with the same classname.

3 Answers3