замена 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>