EN
JavaScript - get all text from the rendered page
0 points
In this article, we would like to show you how to get all text from the rendered page using JavaScript.
Quick solution:
xxxxxxxxxx1
window.addEventListener('load', function() {2
console.log(document.body.innerText);3
});Note:
The
document.body.innerTextneeds to be obtained after windowloadevent or at the end of the script to make sure that all items are loaded before we get the body elementinnerTextvalue.
In this example, we get the document.body innerText property value on window load event. This approach guarantees that all the resources are loaded before we retrieve the text from the entire web page.
xxxxxxxxxx1
2
<html>3
<body>4
<h1>Header</h1>5
<p>Paragraph</p>6
<script>7
8
window.addEventListener('load', function() {9
console.log(document.body.innerText); // prints whole page text in the console10
});11
12
</script>13
<span>Span</span>14
<div>Div</div>15
</body>16
</html>Note:
innerTextreturns the text visible on the page as seen by the user.
In order to include <script> element content, we can use textContent property instead of innerText.
xxxxxxxxxx1
2
<html>3
<body>4
<h1>Header</h1>5
<p>Paragraph</p>6
<script>7
8
window.addEventListener('load', function() {9
console.log(document.body.textContent); // prints whole page text in the console10
});11
12
</script>13
<span>Span</span>14
<div>Div</div>15
</body>16
</html>
