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.
– Petr R., Commented Jul 8, 2013 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 — Alexander
– Alexander, Commented Jul 8, 2013 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
– Hurrem, Commented Jul 8, 2013 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
– Hurrem, Commented Jul 8, 2013 at 15:35

Community · Accepted Answer · 2017-05-23 11:58:33Z

3

In javascript you could try something like:

var source = document.documentElement.outerHTML;

...and to get the doctype use:

var doctype = document.doctype;

source: Get the whole document's html with JavaScript/JQuery

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

Getting the source HTML of the current page from chrome extension

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Jul 8, 2013 at 15:17

jrthib

1,3191 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tckmn · Accepted Answer · 2013-07-08 15:13:28Z

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 8, 2013 at 15:13

tckmn

59.6k27 gold badges118 silver badges156 bronze badges

3 Comments

Hurrem Over a year ago

what if I want to start from the head? the whole page

tckmn Over a year ago

@hurremdev Unfortunately that is not possible with JavaScript.

tckmn Over a year ago

@hurremdev Yes, the title is in the head element. The html element contains the head.

Petr R. · Accepted Answer · 2013-07-08 16:10:49Z

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.

Collectives™ on Stack Overflow

Getting HTML source of a page by JavaScript and overwriting it

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related