Insert text using jQuery if non-breaking space is found within an element?

Question

I'm using a plugin that is generating some additional markup that needs to be removed. I can detect if the HTML entity   exists in a specific element, but I cannot seem to change it using html().

Can anyone spot the issue that's preventing the element from being changed?

HTML

<div class="quote">
    <blockquote>John Doe wrote:
        <p></p>
        <blockquote>
            <p>Jane Doe wrote: This is awesome!</p>
        </blockquote>
    </blockquote>
    <p>&nbsp;</p>
</div>

jQuery

if ($('.quote').find('p:contains("&nbsp;")')) {
  console.log('&nbsp; detected');
  $('.quote').find('p:contains("&nbsp;")').html("inserted text");
}

Here's my fiddle.

You aren't really detecting it. `if ($('.quote').find('p:contains(" ")'))` will always return true; it will always return an array. You should be checking the length of the array instead: `if ($('.quote').find('p:contains(" ")').length > 0)`. — Malk, Feb 06 '15 at 18:38
http://stackoverflow.com/questions/5237989/nonbreaking-space You need the javascript representation of a non-breaking space (`\xA0`), not the html entity. — James Montagne, Feb 06 '15 at 18:43

score 4 · Answer 1 · answered Feb 06 '15 at 18:46

4

Use \xA0 for  :

if ($('.quote').find('p:contains("\xA0")').length) {//use length to verify if it exist
  console.log('&nbsp; detected');
  $('.quote').find('p:contains("\xA0")').html("inserted text");
}

working fiddle

answered Feb 06 '15 at 18:46

Bhojendra Rauniyar

83,432
35
168
231

score 3 · Accepted Answer · answered Feb 06 '15 at 18:53

3

This gets rid of the find and the extra call to $('.quote'):

$('.quote p:contains(\xA0)').html('inserted text');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quote">
    <blockquote>John Doe wrote:
        <p></p>
        <blockquote>
            <p>Jane Doe wrote: This is awesome!</p>
        </blockquote>
    </blockquote>
    <p>&nbsp;</p>
</div>

answered Feb 06 '15 at 18:53

Rick Hitchcock

35,202
5
48
79

Ha, you're right since I removed the `console.log`. Edited. – Rick Hitchcock Feb 06 '15 at 18:57

score -2 · Answer 3 · answered Feb 06 '15 at 18:41

Your if condition is actually invalid. A jQuery selector will always return a jQuery object, so the if will always be true whether or not the DOM element is found. If you want to check for actual results from .find(...) always use .length. ie: if ($('.quote').find('p:contains(" ")').length).

Beyond this, your use of contains is incorrect as contains looks for DOM elements and not content.

To achieve what you're looking for, off the top of my head, you should find all p elements, then iterate over them and manually compare $p.html() against  

My mistake, I didn't realize you can use :contains like that. Thanks. — dshapiro, Feb 06 '15 at 20:23

Insert text using jQuery if non-breaking space is found within an element?

3 Answers3