正则表达式多引号标记

Question

我有多个width="1" height="1"的html。我想用border-image: none替换所有这些内容。

我试过了：

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

似乎没有用。有什么建议吗？

----- ------更新

对于那些问我为什么不需要style标签的人：

实际上，我正在尝试处理由Edge和IE10中的googlemap生成的HTML。我正在使用一个库，它将jQuery div转换为图像，它可以在Edge中使用但不在IE10中。即，html2canvas。我在这里的输出：issue with IE10, IE9

在仔细比较html后，我看到唯一的区别如下：

在IE10中，它有width="1" height="1"标记：

   <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">

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">

我在考虑使用正则表达式将所有width="1" height="1"更改为border-image:none：

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

然后让html2canvas库来处理它：

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);
    }
  });

并且没有任何变化....在IE10上仍显示空白。

下面是两个浏览器中渲染的html的屏幕比较：

Answer 1

您有多个问题。

1. html().replace()返回修改后的字符串，但您没有将其分配回打印画布的html。 （即$printCanvas.html(resultString);）。
2. 您无法使用数据属性border-image替换width=1px css样式。

推荐方法：

找到宽度为1且高度为1的元素（数据属性）。 JQuery一行方法（如果你指定像素）：

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

如果你没有在HTML中指定像素（我假设你的代码基于你的代码）：

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

示例小提琴：https://jsfiddle.net/madc9b25/。