javascript - 更改 HTML 字符串中的图像源属性并再次返回 HTML 字符串

Question

我有 html 网页，我想将此网页下载为 pdf 格式。这样我就可以将此网页转换为字符串，并且必须发送到该服务。即我有不变的字符串 html。我无法添加分割字符串 html 的指示符。当 html 网页太大且包含 Base 64 字符串图像时，我必须使用头像图像 url 更改此 Base 64 字符串(因为它太大而无法使用 json 发送数据)。我有一个简短的 html 字符串，可以更改 Base 64 字符串，然后我可以发送到服务端来下载 pdf。我有一个 HTML 字符串(它看起来像我真正的 html 字符串)，如下所示:

var stringHTML = 
"
<div id="myDiv">
   <img src="abc" /></div>
   <img src="abc" /></div>
   <img src="abc" /></div>
   <img src="abc" /></div>
</div>
";

我想将图像 src 属性值更改为 xyz。即我想将 HTML 字符串转换为:

stringHTML = 
"
<div id="myDiv">
   <img src="xyz" /></div>
   <img src="xyz" /></div>
   <img src="xyz" /></div>
   <img src="xyz" /></div>
</div>
";

如何更改此源属性值并再次返回字符串值？也就是说，我在更改操作后必须有字符串 html..

Answer 1

基于链接的 possible duplicate question ，你会做这样的事情:

stringHTML = stringHTML.replace(/abc/g,"xyz");

或

stringHTML = stringHTML.replace(new RegExp("abc","g"),"xyz"); 

还值得注意的是，您当前的字符串无效。您需要将左右双引号 (") 替换为单引号 (')，或者转义字符串内使用的双引号。并且，正如 Ivan 在评论中提到的，如果没有特殊的允许(转义换行符等)，javascript 就无法跨行。我认为你可以这样定义它:

let stringHTML = ' +
    <div id="myDiv"> +
      <img src="abc" /></div> +
      <img src="abc" /></div> +
      <img src="abc" /></div> +
      <img src="abc" /></div> +
    </div>';

您还可以创建一个数组并立即加入它:

let stringHTML = [
    '<div id="myDiv">',
        '<img src="abc" /></div>',
        '<img src="abc" /></div>',
        '<img src="abc" /></div>',
        '<img src="abc" /></div>',
    '</div>'
].join('');

参见this question有关多行字符串定义的更多信息。