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 Oxylabs' Proxies & Web API
Other CSS web scraping questions
Useful resources
BeautifulSoup Tutorial - How to Parse Web Data With Python
Adomas Sulcas
2026-10-05
Scraping Amazon Product Data With Python: A Step-by-Step Tutorial
Maryia Stsiopkina
2026-10-05
Get the latest news from data gathering world
