How to select HTML elements by text using CSS selectors?
Learn how to target HTML elements based on their text content using CSS selectors. This guide provides a straightforward approach to enhance your data extraction techniques efficiently.
Best practices
Use JavaScript and a library like jQuery or Cheerio for text selection in HTML elements by utilizing the :contains() method.
When using text-based selectors, consider the impact of dynamic content changes and ensure your selector method is updated accordingly.
For performance optimization, avoid overly broad text selectors in large documents; instead, target more specific elements or use class and ID selectors to narrow down the selection.
Remember to handle cases where the text may change due to localization or updates, possibly using data attributes or other stable identifiers instead of text content.
// Install dependencies:
// npm install jsdom jquery
const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const jquery = require('jquery');
// Using built-in fetch available in Node.js v18+
fetch('https://sandbox.oxylabs.io/products')
.then(res => res.text())
.then(html => {
const dom = new JSDOM(html);
const $ = jquery(dom.window);
// Use jQuery to select elements by text
$('h4:contains("Zelda")').each(function() {
console.log($(this).text().trim());
});
});Try Oyxlabs' Proxies & Scraper API
Web scraper API
Public data delivery from a majority of websites
From
49
Other CSS web scraping questions
Useful resources
BeautifulSoup Tutorial - How to Parse Web Data With Python
Adomas Sulcas
2025-04-11
Scraping Amazon Product Data With Python: A Step-by-Step Tutorial
Maryia Stsiopkina
2025-01-17
Get the latest news from data gathering world
Scale up your business with Oxylabs®
Proxies
Advanced proxy solutions
Data Collection
Datasets
Resources
Innovation hub