javascript blob 中的换行符未呈现答案

【问题标题】：Line breaks in javascript blob are not renderingjavascript blob 中的换行符未呈现
【发布时间】：2021-04-06 06:59:46
【问题描述】：

我知道这是重复的，但是，其他文档中的答案都不起作用。
有人知道如何保留换行符而不是删除它们吗？
我也尝试过使用 .替换（/\n/g，“\r\n”），但它不起作用。
任何帮助将不胜感激，谢谢。
代码如下：

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    var a = setTimeout(dST, 2500);
    var b;
    var c;
    var d;
    var e;
    var getResult;

    function dST() {
      $("#startText").remove();
    }

    function create() {
      b = $("#linkedTo").val();
      c = $("#nameIs").val();
      d = $("#doesWhat").val();
      if (c.indexOf('-') != -1) {
        e = "customElements.define('" + c + "', class extends " + b + " { <br>connectedCallback() {<br>" + d + "<br>}<br>});";
        $("#resultCode").html(e);
      } else {
        console.log("hello");
      }
    }

    function downloadA() {
      getResult = $("#resultCode").text();
      var blob = new Blob([getResult], {
        type: "text/javascript",
        endings: "native"
      });
      download(blob, "javascript-file.js");
    }

    function download(blob, name) {
      var url = URL.createObjectURL(blob),
        div = document.createElement("div"),
        anch = document.createElement("a");
      document.body.appendChild(div);
      div.appendChild(anch);
      anch.innerHTML = "&nbsp;";
      div.style.width = "0";
      div.style.hright = "0";
      anch.href = url;
      anch.download = name;
      var ev = new MouseEvent("click", {});
      anch.dispatchEvent(ev);
      document.body.removeChild(div);
    }
  </script>
</head>

<body>
  <p id="startText">This creates elements for you, but is still in beta stage.</p>
  <input value="HTMLElement" id="linkedTo" type="text" readonly>
  <input placeholder="aa-bb" id="nameIs" type="text">
  <br>
  <textarea rows="15" cols="57" placeholder="var p = document.body.createElement('P');               p.innerHTML = 'Hello, World!';                            $('body').append('<p>Hello, World!</p>');" id="doesWhat" type="text"></textarea><br>
  <button type="button" onclick="create(); $('#resultCode').css('border', '1px solid black'); if($('#nameIs').val().indexOf('-') != -1) {$('#downloadB').css('opacity', '1'); } else { $('#downloadB').css('opacity', '0'); }">Create</button>
  <pre id="resultCode"></pre>
  <button id="downloadB" type="button" onclick="downloadA()" style="opacity: 0">Download</button>
</body>

</html>

【问题讨论】：

这些字符只是纯文本中的换行符，它们没有在 HTML 中实现。使用br 元素，或将文本插入显示纯文本的元素中，例如textarea。
<p> 可以工作吗？
不，不会的。
您可以将换行符替换为<br />，这是换行符的 HTML 标记。查看更多：w3schools.com/tags/tag_br.asp

标签： javascript html jquery css blob

【解决方案1】：

我通过获取 html 然后将所有 <br> 更改为 \r\n 解决了这个问题。
这是代码；

getResult = $("#resultCode").html();
getResult = getResult.replace(/<br>/g, "\r\n");
var blob = new Blob([getResult],{type:"text/html"});

【讨论】：