Check assuming Text exists on Page utilizing JavaScript #
To check assuming that particular text exists on the page, utilize the document.body property to get to the body component and check assuming the text content of the body contains the text.
Here is the HTML for the models in this article.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
</head>
<body>
<div id="box" style="background-variety: salmon; width: 150px; level: 150px">
Hi world
</div>
<script src="index.js"></script>
</body>
</html>Furthermore, here is the connected JavaScript code.
index.js
const text = 'Hi world';
if (document.body.textContent.includes(text)) {
console.log('✅ text exists on page');
} else {
console.log('⛔️ text doesn't exist on page');
}We utilized the
document.body property to gain admittance to the body component.The textContent property returns the text content of a hub and its relatives.
At the point when gotten to on the body component, thetextContent property returns the text content of all hubs on the page.We utilized the String.includes strategy to check assuming that the text content on the page contains the particular string.Note that the incorporates technique plays out a case-delicate pursuit to decide whether the substring is contained in the string the strategy was approached.
Assuming that you want to disregard the situation while contrasting the text content and the particular string, convert the two of them to lowercase.
index.js
const text = 'Hi WORLD';
if (document.body.textContent.toLowerCase().includes(text.toLowerCase())) {
console.log('✅ text exists on page');
} else {
console.log('⛔️ text doesn't exist on page');
}By changing both of the qualities over completely to lowercase, we can play out a case harsh correlation.
Note that it would be quicker assuming that you tight things down, by checking in the event that a particular component contains the text.
For example, this code snippet checks if the div element contains the specific text.
index.js
const text = 'Hi WORLD';
const box = document.getElementById('box');
if (box.textContent.toLowerCase().includes(text.toLowerCase())) {
console.log('text exists on page');
} else {
console.log('text doesn't exist on page');
}Since the
textContent property returns the text content of the component and its relatives, odds are all you can choose a particular component and check in the event that it contains the text.Accessing the textContent property on the body element means that we append the text content of every single node on the page to a string, which can be slow on pages with a lot of nested elements.
