Search code examples
javascriptjquerysafarijquery-events

Replace not work in iPad, how to use replace in iPad?

I have used below code for replacing html, it is working in browser but not working in iPad Safari browser how to resolve this?

var text=$('#content_area').html();
var text2=text.replace('<span style="background-color: rgb(233, 207, 236);">proposes</span>'
, 'proposes'); 
$('#content_area').html(text2);
Solution

  • You're Doing It Wrong™. Don't modify raw HTML strings, modify the DOM.

    $( '#content_area span:contains("proposes")' ).replaceWith( 'proposes' );

    You could select by background color as well, but it's not as reliable. The problem is most likely that the Mobile Safari doesn't keep the color as rgb() but in hex format, so something like this might work:

    $( '#content_area span' ).filter(function() {
    return ( $(this).css('background-color') === 'rgb(233, 207, 236)' 
          || $(this).css('background-color').toLowerCase() === '#e9cfec' );
}).replaceWith( 'proposes' );

    The best solution would be if you can add a class to the spans or otherwise reliably distinguish them so that the selector would be unambiguous.