Question

<div>Some reallllly
realllyyy long text</div>

将呈现为Some reallllly realllyyy long text，因为HTML会删除换行符。

但由于换行符，我无法使用div CSS选择器找到:contains()：

// Returns an empty array
$(':contains("Some reallllly realllyyy long text")');

有没有办法选择div并忽略换行符？

注意：我不想在选择器中添加换行符，我希望能够在不知道换行符的情况下选择div（因为我使用了用户可以看到的文本，他看不到换行符）

Answer 1

您可以做的是覆盖:contains选择器：

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

请参阅 Fiddle

使用这样的解决方案，您不必更改代码中的任何内容，只需添加此代码即可。但这不是一个好习惯。
当然你可以用其他方式命名这个选择器。在这种情况下，您可以使用以下两种行为：

$.expr[":"].mycontains

查看其他 Fiddle

Answer 2

这个概念非常有效，我的答案也是如此：

$("div").each(function () {
    if ($(this).text()replace(/(\n)+/g, " ") == "Some reallllly realllyyy long text") {
        // Do something
        $(this).css({color: 'red'});
    }
});

请记住，浏览器恰好将空白字符集合呈现为单个空格。请重新考虑你的方法。

CSS选择器：contains（）不使用换行符

2 个答案: