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

Perform the action when the button is clicked

Display a concealed text box upon clicking BOTH radio buttons as well as a button

How can we modify the position of a header from fixed to relative when the mobile drop-down menu is opened?

Resolving the dilemma of complete form validation in Jquery

How to transform multi-dimensional arrays to JSON format using JavaScript (and maybe jQuery)

Save user input data into an Excel file using PHPExcel

Switching back and forth between celsius and fahrenheit using jQuery (my mistake in the code)

Troubleshooting issues with the 'date' input type feature on mobile devices

Having trouble grasping the display property combination in Bootstrap4

Bootstrap does not control the text family, weight, and line height

Ways to navigate to a new webpage in JavaScript without the need to click on a link

When using JavaScript to dynamically load canvases and create drawing contexts within a function, the context may suddenly disappear

Unable to submit form within a while loop in PHP table

Response received from PHP POST request using Ajax

Tips for preventing a page from automatically scrolling to the top after submitting a form

Adding jQuery content to a div that is being created dynamically

Vuetify 3 now displays full text in v-autocomplete without an ellipsis

The event.target.x attribute on the <i /> tag element

Customizing the hover behavior of a div element without causing displacement of surrounding elements

Incorrectly colored buttons upon clicking