用外部文本文件中的内容替换JavaScript正则表达式

下面是我的代码，其中下面的注释模式将替换为新内容。它工作得很好

内部HTML：

<div id="content">
    <!-- ### START CONTENT ### -->
    <p>Some text.</p>
    <!-- ### END CONTENT ### -->
</div>

Javascript代码：

var str = document.getElementById("content").innerHTML; 
    var txt = str.replace(/<!-- ### START CONTENT ### -->([\s\S]*?)<!-- ### END CONTENT ### -->/g, '<div id="example">Some replaced example stuff !!</div>');
    document.getElementById("content").innerHTML = txt;

但是，我的问题是。。我想替换一大块html代码，而不是一些被替换的例子

所以，对于这个。。我计划将一大块html代码保存在一个文本文件中，当模式匹配时，将调用该文本文件并显示文件中的内容

是否可以替换外部文本文件中的内容

注意：文本文件将放在根目录中

JSIDLE链接：

---

大块html代码链接：

我会采用另一种方法，它不需要html注释，也不需要regexp替换。将要替换内容的文本文件的名称作为元素的数据属性：

<div id="content" data-replace-file="foo.html">

查找所有相关元素并进行替换：

// Find all the elements to be replaced.
var replace = document.querySelectorAll('[data-replace-file]');

// Loop across elements, replacing each one.
for (var i=0; i<replace.length; i++) {
  var elt = replace[i];
  var file = elt.dataset.replaceFile;
  $(elt).load(file);
}

如果您坚持使用HTML注释的计划，那么

var elt = document.getElementById("content");
var str = elt.innerHTML;
var regexp = /(<!-- ### START CONTENT ### -->)([\s\S]*?)(<!-- ### END CONTENT ### -->)/;

if (regexp.test(str)) {
  $.get("blah.html", function(data) {
    elt.innerHTML = str.replace(regexp, "$1" + data + "$3");      
  });
}

这是一个完整的HTML文件，在我的环境中运行良好：

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<div id="content">
    <!-- ### START CONTENT ### -->replace me<!-- ### END CONTENT ### -->
</div>

<button onclick="go()">Go</button>

<script>
  function go() {
    var elt = document.getElementById("content");
    var str = elt.innerHTML;
    var regexp = /(<!-- ### START CONTENT ### -->)([\s\S]*?)(<!-- ### END CONTENT ### -->)/;

    if (regexp.test(str)) {
      $.get("blah.html", function(data) {
        elt.innerHTML = str.replace(regexp, "$1" + data + "$3");
      });
    }
  }
</script>

---

当然请你解释一下好吗。谢谢：你为什么不通过JavaScript生成HTML而不是像字符串一样处理它呢？你能解释一下怎么做吗？嗨，谢谢你的回复！但是，我真正想要的是。。首先，它将在何时匹配上述注释模式开始和结束。。然后，文本文件中的内容应该替换内部内容ID。或者，如果您有任何其他想法，可以使用上述javascript代码替换大块代码。。请告诉我。谢谢是的，我知道这是你真正想要的。你在问题中描述了它。我想说的是，这不是一个很好的方法。如果你解释一下你的实际问题，而不是你决定用什么方式来解决它，也许会有所帮助。有许多客户机/服务器体系结构，包括各种基于ajax调用更新内容的方法，但这不是最好的方法之一。您还需要指定目标环境是什么。根据这一点，可能会有更好、更现代的解决方案，如HTML导入或web组件。无论如何，请参阅更新的答案。谢谢！：实际上，我正在构建一个简单的html代码转换web应用程序，完全可以找到并替换上面提到的注释模式。。其中，用户在文本框中输入html模板代码。。当用户点击一个按钮。。输出将被转换为代码。就这样。我是网络编程新手。。不知道这是个好办法。你能指导我吗？在你的特殊情况下，iframe听起来不是一个糟糕的解决方案。你上面的代码不起作用。控制台中的错误是：未捕获引用错误：$未定义。有解决办法吗？