CODEWITHSUNDEEP
javascriptjquery
jmng
jmng

Reputation: 2568

JQuery :contains can't find text

I'm trying to use :contains to find bits of text inside a div and it's working fine except when it encounters documents that include "&nbsp" or "'".

Strangely enough, I can use :contains even for text that contains "&amp", but not for the other cases.

Here's my attempt, also at https://jsfiddle.net/sesyj5kd/

<div class="container">
  <div class="row">
    <div class="col-md-8">
     <div class="well">
        <div id="dText" style="background: white; height: 90%; overflow-y:auto;" ></div>
     </div>    
    </div>   
  </div>  
</div>

Script:

var str1 = "<html><head></head><body><p>This is the doc's first sentence</p><div>not the first sentence, but it's in a div & all </div>    </body></html>";

$("#dText").html( str1 );

console.log( $("#dText").html() ); 
console.log( $("*:contains('the doc's first')") );
console.log( $("*:contains('in a div & all')") );

The second :contains finds the specified text, but the first doesn't, even if I search for "doc\'s"; is it necessary/possible to escape characters like &nbsp or something of the sort?

The main problem I'm facing is that div.html(htmlString) displays the content correctly, but looking at console.log(div.html()) I can see a lot of &nbsp (even though these are not in the HTML string) which prevent :contains from working properly on any multiword query when the target text has an &nbsp between words.

Upvotes: 0

Views: 418

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

First, you are tring to console log a collection of elements which constains the searched string. You should target an info about it... Like its class.

I added classes to your injected string.

Then, like said, it is a collection. A simple console.log() like you do will output the first found element... Which would probably be the body or the html. You have to target the last found element, the "closest" one from the searched string.

And finally, you have to escape the quote in the search string.

Here is a Fiddle... Look at the console.

var str1 = "<p class='myP'>This is the doc's first sentence</p><div class='myDiv'>not the first sentence, but it's in a div & all </div>";

$("#dText").html( str1 );
console.log("String: "+ $("#dText").html() ); 

var test1 = $("*:contains('the doc\\'s first')");
var test2 = $("*:contains('in a div & all')");


// Get the last element found containing the string.
console.log("1: "+test1.last().attr("class"));
console.log("2: "+test2.last().attr("class"));

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

You need to change the line:

console.log( $("*:contains('the doc's first')") );

to:

console.log('Second Log: ' +   $("*:contains(\"the doc's first\")").length );
                                             ^^               ^^


var str1 = "<html><head></head><body><p>This is the doc's first sentence</p><div>not the first sentence, but it's in a div & all </div>    </body></html>";

$("#dText").html(str1);

console.log('First Log: ' + $("#dText").html());
console.log('Second Log: ' + $("*:contains(\"the doc's first\")").length);
console.log('Third Log: ' + $("*:contains('in a div & all')").length);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="well">
                <div id="dText" style="background: white; height: 90%; overflow-y:auto;"></div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions