如何在 html 字符串的 src 属性末尾附加一个值答案

【问题标题】：How to append a value at the end of src attribute in html string如何在 html 字符串的 src 属性末尾附加一个值
【发布时间】：2020-05-28 22:12:11
【问题描述】：

我有这个 html 字符串，我想修改 src 标记，以便保留值但在属性末尾附加一个字符串

修改前的HTML

<html>
  <head>
    <title>LDRA Testbed Results</title>
  </head>
  <script> 
    var AddTxt = true;
    var TBpublish = true;
  </script>
  <frameset cols="206,*" marginwidth="0" marginheight="0"
FRAMEBORDER="no" BORDERCOLOR="#DEDEEF">
     <frame src="./App_xyz_P_tbresults/App_xyz_P.lfm.htm" name="lFrame" NORESIZE>
     <frame src="htm_idx/frontpage.htm" name="rFrame" FRAMEBORDER="no">
  </frameset> 
</html>

修改后的HTML

<html>
   <head>
     <title>LDRA Testbed Results</title>
   </head>
   <script> 
      var AddTxt = true; 
      var TBpublish = true;
   </script>
   <frameset cols="206,*" marginwidth="0" marginheight="0" FRAMEBORDER="no" BORDERCOLOR="#DEDEEF">
      <frame src="./App_xyz_P_tbresults/App_xyz_P.lfm.htm:A:1" name="lFrame" NORESIZE>
      <frame src="htm_idx/frontpage.htm:A:1" name="rFrame" FRAMEBORDER="no">
    </frameset> 
</html>

如何在 Node.js 中做到这一点

当前代码 这就是我目前使用解析器解析 html 代码的方式

var html = chunk.toString();
    var temp = html;

    html = parse(html);
    var modifiedHTML = [];
    var elementsTag = [
      "<a ",
      "<area ",
      "<base ",
      "<body ",
      "<frame ",
      "<iframe ",
      "<img ",
      "<input ",
      "<link ",
      "<script ",
      "<audio ",
      "<embed ",
      "<source ",
      "<track ",
      "<video "
    ];

    var elements = [
      "a",
      "area",
      "base",
      "body",
      "frame",
      "iframe",
      "img",
      "input",
      "link",
      "script",
      "audio",
      "embed",
      "source",
      "track",
      "video"
    ];

    for (var i = 0; i < elementsTag.length; i++) {
      var count = (temp.match(new RegExp(elementsTag[i], "g")) || []).length;

      for (var j = 0; j < count; j++) {
        var elementAttr = html.querySelector(elements[i]);

        if (elementAttr != null) {
          // console.log(elementAttr);
          if (Object.keys(elementAttr.attributes).length > 0) {
            Object.keys(elementAttr.attributes).forEach(attribute => {
              if (attribute == "src" || attribute == "href") {
                var attributeVal = elementAttr.attributes[attribute];
                // console.log(attributeVal[j]);
                attributeVal = attributeVal + `:${project_name}:${type}`;
                elementAttr.setAttribute(attribute, attributeVal);
              }
            });
          }
          modifiedHTML.push(elementAttr.outerHTML);
        }
      }
    }

    console.log(modifiedHTML);

输出：

[
[0]   '<frame src="./App_xyz_P_tbresults/App_xyz_P.lfm.htm:TEST:static_analysis_report1:TEST:static_analysis_report1" name="lFrame" NORESIZE></frame>',
[0]   '<frame src="./App_xyz_P_tbresults/App_xyz_P.lfm.htm:TEST:static_analysis_report1:TEST:static_analysis_report1:TEST:static_analysis_report1" name="lFrame" NORESIZE></frame>'
[0] ]

【问题讨论】：

对节点使用 HTML 解析器：npmjs.com/package/node-html-parser
我做了，但是当我选择一个框架标签时，它总是返回第一个标签，所以我无法在第一个标签之后更改标签的 src
然后发布代码...
我做了更改检查一下

标签： javascript html node.js

【解决方案1】：

在 JavaScript 中解析 HTML 并非易事。我没有检查你的尝试，但你真的应该使用现有的 HTML 解析器而不是自己做。

您可以使用例如jsdom 来实现您想要的：

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

let html = `<html>
  <head>
    <title>LDRA Testbed Results</title>
  </head>
  <script> 
    var AddTxt = true;
    var TBpublish = true;
  </script>
  <frameset cols="206,*" marginwidth="0" marginheight="0"
FRAMEBORDER="no" BORDERCOLOR="#DEDEEF">
     <frame src="./App_xyz_P_tbresults/App_xyz_P.lfm.htm" name="lFrame" NORESIZE>
     <frame src="htm_idx/frontpage.htm" name="rFrame" FRAMEBORDER="no">
  </frameset> 
</html>`;

const dom = new JSDOM(html);

let frameset_children = dom.window.document.body.children;
for (let i = 0; i < frameset_children.length; i++) {
  let frame = frameset_children[i];
  frame.src = frame.src + ':A:1';
}

console.log(dom.serialize())

【讨论】：

您好，如何修改 dom 中所有元素的 src 或 href 属性？？
我想你可以用同样的方法，解析整个文档正文，可能需要一些验证来识别你想要修改的节点。您可能可以使用像this answer 这样的jQuery 来让您更轻松。