Html content to string javascript

View Discussion

Nội dung chính Show

How do I convert HTML to normal text?
What is parseHTML in JavaScript?
How do you convert something to a string in JavaScript?
How do I display HTML as plain text?

Improve Article

Save Article

Read

Discuss

View Discussion

Improve Article

Save Article

Given an HTML document, the task is to get the entire document as a string using JavaScript. Here few methods are discussed:

getElementsByTagName() Method
This method returns a set of all elements in the document with the defined tag name, as a NodeList object.
This object represents a collection of nodes, Which are accessed by index numbers. The index starts at 0.
Syntax:

document.getElementsByTagName(tagname)

Parameters:
- tagname: This parameter is required. It specifies the tagname of the elements to get.
HTML DOM innerHTML Property
This property set/return the HTML content (inner HTML) of an element.
Syntax:
- Return the innerHTML property:

HTMLElementObject.innerHTML

Set the innerHTML property:

HTMLElementObject.innerHTML = text

text: It specifies the HTML content of an element.

Example 1: This example gets the whole document as string using document.documentElement.innerHTML.

html

<!DOCTYPE html>

<html>

<head>

<title>

JavaScript | Get the entire document HTML as a string.

</title>

</head>

<body style="text-align:center;" id="body">

<h2 style="color:green;">

GeeksforGeeks

</h2>

<p id="GFG_UP" style="font-size: 15px; font-weight: bold;">

</p>

<button onclick="GFG_Fun(); ">

click here

</button>

<script>

var up = document.getElementById('GFG_UP');

up.innerHTML = 'Click on the button to convert whole document to string';

function GFG_Fun() {

var string = document.documentElement.innerHTML;

alert(string);

}

</script>

</body>

</html>

Output:

Before clicking the button:

After clicking the button:

Example 2: This example gets the whole document by first selecting the elements with tagname ‘HTML’ and selecting the first element by indexing using document.getElementsByTagName(‘html’)[0].innerHTML.

html

<!DOCTYPE html>

<html>

<head>

<title>

JavaScript | Get the entire document HTML as a string.

</title>

</head>

<body style="text-align:center;" id="body">

<h2 style="color:green;">

GeeksforGeeks

</h2>

<p id="GFG_UP" style="font-size: 15px; font-weight: bold;">

</p>

<button onclick="GFG_Fun(); ">

click here

</button>

<script>

var up = document.getElementById('GFG_UP');

up.innerHTML = 'Click on the button to convert whole document to string';

function GFG_Fun() {

var string = document.getElementsByTagName('html')[0].innerHTML;

alert(string);

}

</script>

</body>

</html>

Output:

Before clicking the button:

After clicking the button:

Supported Browsers:

Google Chrome
Mozilla Firefox
Internet Explorer
Safari
Opera

How do I convert HTML to normal text?

Convert HTML file to a text file (preserving HTML code and text)..

Click the File tab again, then click the Save as option..

In the Save as type drop-down list, select the Plain Text (*. txt) option. ... .

Click the Save button to save as a text document..

What is parseHTML in JavaScript?

parseHTML( data [, context ] [, keepScripts ] ) jQuery. parseHTML uses native methods to convert the string to a set of DOM nodes, which can then be inserted into the document. These methods do render all trailing or leading text (even if that's just whitespace).