CODEWITHSUNDEEP
javascriptregex
JavaScripter
JavaScripter

Reputation: 4842

Regex multiple quotes mark

I have html with multiple width="1" height="1". I'd like to replace all of them with border-image: none.

I've tried:

$printCanvas.html().replace(new RegExp("width=\"1\" height=\"1\"", 'g'), "border-image: none");

and seems didn't work. Any suggestions?

-----update------

To those who asked why I don't need styletag:

Actually, I was trying to process the HTML which generated by googlemap in Edge and IE10. I am using a library, which convert that jQuery div into an image and it works in Edge but didn't in IE10. Namely, html2canvas. My output here: issue with IE10, IE9

After carefully comparing the html, I saw the only difference is below:

In IE10, it has width="1" height="1" tag:

   <div style="width: 66px; height: 26px; cursor: pointer;"><img width="1" height="1" style="margin: 0px; padding: 0px; border: 0px currentColor; left: 0px; top: 0px; width: 66px; height: 26px; position: absolute; -ms-user-select: none;" draggable="false" src="https://maps.gstatic.com/mapfiles/api-3/images/google4.png">

in Edge:

<div style="width: 66px; height: 26px; cursor: pointer;"><img style="margin: 0px; padding: 0px; border: 0px currentColor; border-image: none; left: 0px; top: 0px; width: 66px; height: 26px; position: absolute; -ms-user-select: none;" draggable="false" src="https://maps.gstatic.com/mapfiles/api-3/images/google4.png">

I am thinking just using regex to change all width="1" height="1" to border-image:none:

printCanvas.html().replace(new RegExp("width=\"1\"\\s+height=\"1\"", 'g'), "border-image: none");

and then ask html2canvas library to process it:

window.html2canvas(printCanvas, {
    useCORS: true,
    onrendered: function(canvas) {
      const img = canvas.toDataURL("image/png");               
      base64Img = img;
      base64Img = base64Img.replace('data:image/png;base64,', '');
      resolve(base64Img);
    }
  });

and nothing has changed....still show blank on IE10.

below is the screen compare of the rendered html in both browser:

enter image description here

Upvotes: 0

Views: 70

Answers (1)

Sean Perkins
Sean Perkins

Reputation: 541

You have multiple issues.

  1. The html().replace() returns the modified string, but you are not assigning it back to the print canvas's html. (i.e. $printCanvas.html(resultString);).
  2. You cannot swap out the border-image css style with data attributes width=1px.

Recommended approach:

Find the elements that have a width of 1 and a height of 1 (data attributes). JQuery one line approach (if you specify pixels):

$('*[width="1px"]*[height="1px"]').css('border-image', 'none');

If you do not specify pixels in your HTML (which I'm assuming based off your code):

$('*[width="1"]*[height="1"]').css('border-image', 'none');

Example fiddle: https://jsfiddle.net/madc9b25/.

Upvotes: 3

Related Questions