Menu
I have a function, matchTagAndText which as the name says accepts 2 arguments a selector and text and checks if any of the matched elements has the given text. It goes like so:
function matchTagAndText(sel, txt) {
var elements = document.querySelectorAll(sel);
return Array.prototype.filter.call(elements, function(element){
return RegExp(txt,'i').test(element.textContent);
});
}
Now I am trying to select a td element which contains text 'Lorem ipsum' in it but I am unable to do so.
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Frames</title>
</head>
<body>
<td colspan="2" class="font-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nulla iste, quae necessitatibus. Impedit mollitia delectus eum voluptas ullam! Perspiciatis in dolorem blanditiis dolores mollitia sint nostrum sunt veniam est!
</td>
</body>
</html>
I tried calling the function after defining it in console with:
var el = matchTagAndText('td.font-description','Lorem ipsum');
But this returns an empty array. What is wrong with my function?
Live Example:
function matchTagAndText(sel, txt) {
var elements = document.querySelectorAll(sel);
return Array.prototype.filter.call(elements, function(element){
return RegExp(txt,'i').test(element.textContent);
});
}
var el = matchTagAndText('td.font-description','Lorem ipsum');
console.log(el);<td colspan="2" class="font-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nulla iste, quae necessitatibus. Impedit mollitia delectus eum voluptas ullam! Perspiciatis in dolorem blanditiis dolores mollitia sint nostrum sunt veniam est!
</td>
271
textContent gets the content of all elements, including <script> and <style> elements. In contrast, innerText only shows "human-readable" elements. textContent returns every element in the node. In contrast, innerText is aware of styling and won't return the text of "hidden" elements.
In JavaScript, the textContent property allows us to get or set the text content of a node, or an element. Setting the textContent property will remove and replace the child nodes with the new text node. The textContent property returns the content of an element/node and all of its descendents(child nodes).
textContents is all text contained by an element and all its children that are for formatting purposes only. innerText returns all text contained by an element and all its child elements. innerHtml returns all text, including html tags, that is contained by an element.
The textContent property in HTML is used to set or return the text content of the specified node and all its descendants. This property is very similar to nodeValue property but this property returns the text of all child nodes. Syntax: It is used to set the text of node.
The problem, intriguingly, is that your markup is invalid: You have td with no surrounding tr or table. If you fix that, it works:
function matchTagAndText(sel, txt) {
var elements = document.querySelectorAll(sel);
return Array.prototype.filter.call(elements, function(element){
return RegExp(txt,'i').test(element.textContent);
});
}
var el = matchTagAndText('td.font-description','Lorem ipsum');
console.log(el);<table>
<tr>
<td colspan="2" class="font-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nulla iste, quae necessitatibus. Impedit mollitia delectus eum voluptas ullam! Perspiciatis in dolorem blanditiis dolores mollitia sint nostrum sunt veniam est!
</td>
</tr>
</table>If we inspect your example using Chrome's devtools, we can see that in its attempt to make the HTML valid, it's just completely stripped your td tag, and its associated class, so your selector doesn't match anything:
125
Your code is fine, your markup is not - A TD should live inside a row inside a table.
function matchTagAndText(sel, txt) {
var elements = document.querySelectorAll(sel);
return Array.prototype.filter.call(elements, function(element) {
return RegExp(txt, 'i').test(element.textContent);
});
}
var el = matchTagAndText('td.font-description','Lorem ipsum');
console.log(el);<table>
<tbody>
<tr>
<td colspan="2" class="font-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nulla iste, quae necessitatibus. Impedit mollitia delectus eum voluptas ullam! Perspiciatis in dolorem blanditiis dolores mollitia sint nostrum sunt veniam est!
</td>
</tr>
</tbody>
</table>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
