While dealing with the data in bulk, there can be a possibility of ambiguity in locating the element against the contained content while accessing it. In such a case, checking out each of the elements becomes challenging. For instance, integrating the element with a particular chunk of content. In such situations, finding elements by content using JavaScript aids in accessing the data conveniently.
This blog will discuss the approaches to find elements by content using JavaScript.
How to Find Elements by Content Using JavaScript?
To find elements by content using JavaScript, the following approaches are in combination with the “querySelectorAll()” method and the “textContent” property:
Approach 1: Find Element by Content in JavaScript Using includes() Method
The “querySelectorAll()” method fetches all the elements matching a CSS selector(s) and returns a node list. Whereas the textContent gives the text content of the particular node, and the includes() method returns “true” if the specified string is included in a particular string.
These approaches can be applied in combination to access the “div” element, access the included text, and append the element to a null array upon the satisfied condition.
Syntax
In the given syntax:
- “selectors” corresponds to one or more than one CSS selector.
Here, the includes() method will search for the given “value” in the associated “string”.
Example
Let’s go through the following demonstration:
<script type="text/javascript">
let givenText = 'Linux Hint';
let include = [];
for (let div of document.querySelectorAll('div')) {
if (div.textContent.includes(givenText)) {
include.push(div);
}
}
console.log("The Element is:", include);
</script>
Perform the following steps as given in the above code snippet:
- In the first step, specify the “div” element having the stated content in text form.
- In the JS code, initialize the string value that needs to be matched for the text content within the “div” element.
- After that, declare an empty array named “include”.
- In the next step, apply the “querySelectorAll()” method and the “for…of” loop to fetch the “div” element by tag and iterate through it, respectively.
- Now, apply the “textContent” property and the “includes()” method in combination to check if the initialized string value is included in the “div” element.
- If so, the element will be appended to the created “null” array via the “push()” method.
Output
From the above output, it is evident that the element is pushed into the array upon the satisfied condition.
Approach 2: Find Element by Content in JavaScript Using Array.from() and match() Methods
The “Array.from()” method returns an array from an object having the length of the array as its parameter. The “match()” method matches a string with a regular expression. These methods can be implemented likewise to access the element by matching the content of the particular string value with the element’s text content.
Syntax
In the above-given syntax:
- “object” points to the object to be converted into an array.
- “map” corresponds to the map function that needs to be mapped on each item.
- “value” is the value to be utilized as “this” for the map function.
In the given syntax:
- “match” refers to the value required to be searched.
Example
Let’s overview the below-given example:
<h3>This is JavaScript related stuff</h3>
</body>
<script type="text/javascript">
let givenText = 'JavaScript';
let get = Array.from(document.querySelectorAll('h3'));
let include = []
let match = get.find(cont => {
if (cont.textContent.match(givenText)){
include.push(cont)
}});
console.log("The Element is:", include);
</script>
Perform the following steps in the above lines of code:
- Likewise, include the “<h3>” element.
- In the JavaScript code, similarly, initialize the stated string value.
- In the next step, apply the “from()” method having the “querySelectorAll()” method as its parameter, which will fetch the “<h3>” element by its tag, and the former method will convert the result into an array.
- After that, initialize a “null” array. Also, apply the “find()” method to iterate through the array returned in the previous step.
- The “textContent” property and the “match()” method will match the value of the specified string with the text contained in the accessed element.
- Upon the satisfied condition, the “<h3>” element will be appended to the created null array, as discussed before.
Output
The above output indicates that the desired requirement is fulfilled.
Conclusion
The combined “querySelectorAll()” method and the “textContent” property can be applied with the “includes()” method or “Array.from()” and “match()” methods to find elements by content using JavaScript. This tutorial explained how to find elements by content using JavaScript with the help of different examples.
