jQuery contains ignoring HTML

Question

I have this HTML code:

<pre class="">
    <span style="padding-right: 0.1px;">
        <span class="cm-operator">=</span>
        <span class="cm-operator interactive-linter-warning">===</span>
        <span class="cm-operator interactive-linter-warning interactive-linter-error">===</span>
    </span>
</pre>

It looks, rendered, like:

=======

I need a way to select the <pre/> element basing the selection on the content of the element, I've tried with :contains:

$("pre:contains('=======')")

But it doesn't work, probably because it considers even the HTML contained inside the <pre/> element.

How can I ignore the HTML and consider just the text?

Answer 1

I would give a try to :

$("pre").filter(function(){ return $(this).text().indexOf('=======') != -1 });

Preventing spaces to get in between equal signs

$("pre").filter(function(){
      return $(this).text().replace(/=\s+/g,'=').indexOf('=======') != -1
  }
);

Still not lightweight though

Answer 2

I would .filter by text on each pre element and trim that extra whitespace:

$("pre").filter(function() {
    return $(this).text().replace(/\s/g, "") === "=======";
});

jsFiddle

Answer 3

Try this -

$('pre').each(function(){
   var val = $.trim($(this).text().replace(/\n+\s+/g,''));
   if( val == '======='){
      alert($(this).attr('class'));    
   }
});

Demo