I need to extract all the text content from a web page. I have used 'document.body.textContent'. But I get the javascript content as well.How do I ensure that I get only the readable text content?
function myFunction() {
var str = document.body.textContent
alert(str);
}<html>
<title>Test Page for Text extraction</title>
<head>I hope this works</head>
<script src=".1.3/jquery.min.js"></script>
<body>
<p>Test on this content to change the 5th word to a link
<p>
<button onclick="myFunction()">Try it</button>
</body>
</hmtl>I need to extract all the text content from a web page. I have used 'document.body.textContent'. But I get the javascript content as well.How do I ensure that I get only the readable text content?
function myFunction() {
var str = document.body.textContent
alert(str);
}<html>
<title>Test Page for Text extraction</title>
<head>I hope this works</head>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body>
<p>Test on this content to change the 5th word to a link
<p>
<button onclick="myFunction()">Try it</button>
</body>
</hmtl>2 Answers
Reset to default 5Just remove the tags you dont want read before doing body.textContent.
function myFunction() {
var bodyScripts = document.querySelectorAll("body script");
for(var i=0; i<bodyScripts.length; i++){
bodyScripts[i].remove();
}
var str = document.body.textContent;
document.body.innerHTML = '<pre>'+str+'</pre>';
}<html>
<title>Test Page for Text extraction</title>
<head>I hope this works</head>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body>
<p>Test on this content to change the 5th word to a link
<p>
<button onclick="myFunction()">Try it</button>
</body>
</hmtl>Try document.body.innerText.
This MDN article describes the differences between textContent and innerText:
Don't get confused by the differences between
Node.textContentandHTMLElement.innerText. Although the names seem similar, there are important differences:
textContentgets the content of all elements, including<script>and<style>elements. In contrast,innerTextonly shows "human-readable" elements.textContentreturns every element in the node. In contrast,innerTextis aware of styling and won't return the text of "hidden" elements.