使用外部文本文件中的內容替換JavaScript REGEX

Question

這是我的代碼，其中以下注釋模式將替換為新內容。 而且工作正常。

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代碼，而不是<div id="example">Some replaced example stuff !!</div> 。

因此，為此，我計划將一大段html代碼保存在一個文本文件中，然后將調用該文本文件，並在模式匹配時顯示該文件中的內容。

是否可以替換外部文本文件中的內容？

注意：文本文件將放置在根目錄中。

Jsfiddle鏈接： http ： //jsfiddle.net/Lipak/2efm1o4c/9/

大型HTML代碼鏈接： http ： //jsfiddle.net/Lipak/zn8fj5q3/

Answer 1

我將采用另一種方法，該方法不需要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>