Using the CSS selector :contains() does not function properly when there are line breaks present

Question

Using the CSS selector :contains() does not function properly when there are line breaks present

<div>A very lengthy 
text that goes on and on</div>

When rendered,

A very lengthy text that goes on and on

will appear as HTML removes the line breaks.

However, locating the div using the :contains() CSS selector is challenging due to the line break:

// Returns an empty array
$(':contains("A very lengthy text that goes on and on")');

Is there a method to select the div content while disregarding the line break?

Note: Without adding the line break in the selector, I aim to choose the div without prior knowledge of the presence of a line break (as it's based on what the user sees, who might not be aware of the line break).

jquery html css jquery-selectors

Answer 1

Answer №1

If you're looking to customize the behavior of the :contains selector, you can do so by overriding it with a new function like this:

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().replace(/(\n)+/g, " ").indexOf(arg) >= 0;
    };
});

Check out this Fiddle for an example.

This method allows you to keep your existing code intact and simply add in this snippet. However, it's typically not recommended as best practice. You could also rename the custom selector if desired:

$.expr[":"].mycontains

Another example is available in this different Fiddle.

Answer 2

If you're looking to customize the behavior of the :contains selector, you can do so by overriding it with a new function like this:

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().replace(/(\n)+/g, " ").indexOf(arg) >= 0;
    };
});

Check out this Fiddle for an example.

This method allows you to keep your existing code intact and simply add in this snippet. However, it's typically not recommended as best practice. You could also rename the custom selector if desired:

$.expr[":"].mycontains

Another example is available in this different Fiddle.

Answer 3

Answer №2

The idea is quite inefficient and so is my response:

$("article").each(function () {
    if ($(this).text().replace(/(\n)+/g, " ") == "A really long text here") {
        // Take action
        $(this).css({color: 'blue'});
    }
});

Keep in mind that the browser interprets a series of whitespace characters as a single space. It might be wise to reconsider your approach.

Answer 4

The idea is quite inefficient and so is my response:

$("article").each(function () {
    if ($(this).text().replace(/(\n)+/g, " ") == "A really long text here") {
        // Take action
        $(this).css({color: 'blue'});
    }
});

Keep in mind that the browser interprets a series of whitespace characters as a single space. It might be wise to reconsider your approach.

Using the CSS selector :contains() does not function properly when there are line breaks present

Answer №1

Answer №2

Similar questions

Updating database tables by incorporating jquery and mysql via php

gh-pages: Images that should not be cached

Show the result of (Firstname) on the thank you page after the form has been submitted

Having a newline between HTML elements can disrupt the structure of an HTML layout

Change to a dark theme using React hooks in typescript

Scrolling in iOS 8 causing flickering problem with background image

Tips for adjusting your Navbar from transparent to solid based on screen size changes instead of scrolling

Angular Bootstrap: How to Resolve the Error "Function $(...).collapse() is Undefined"

Switching between various quantities of inputs in each row using Bootstrap V3

In MUI React, the opacity of the placeholder is customizable and can be easily adjusted. This allows for the placeholder to be hidden

Resolve the issue pertaining to the x-axis in D3 JS and enhance the y-axis and x-axis by implementing dashed lines

Tips on utilizing browser scroll for horizontal overflow of internal div?

Maintaining alignment between the site content and the navbar items is a key feature of Bootstrap

Reloading data in Angular using jQuery DataTables

Ways to conceal a div using ng-hide

How to align the last item in the bottom row using Flexbox styling

Check out the source code of the file causing the redirection

Using the AJAX post method to generate a JSON object from database results and send it back to a jQuery UI Dialog

Attaching an input text box to an Angular $scope is not possible

Is there a way to address this scrollbar issue without relying on HTML?