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:
window.addEventListener('load', function() {
console.log(document.body.innerText);
});
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.
Practical example
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.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<h1>Header</h1>
<p>Paragraph</p>
<script>
window.addEventListener('load', function() {
console.log(document.body.innerText); // prints whole page text in the console
});
</script>
<span>Span</span>
<div>Div</div>
</body>
</html>
Note:
innerTextreturns the text visible on the page as seen by the user.
Including <script> element
In order to include <script> element content, we can use textContent property instead of innerText.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<h1>Header</h1>
<p>Paragraph</p>
<script>
window.addEventListener('load', function() {
console.log(document.body.textContent); // prints whole page text in the console
});
</script>
<span>Span</span>
<div>Div</div>
</body>
</html>