Присвоить фрагмент HTML переменной JS

Question

У меня есть example.html файл:

<span>
{{test}}
</span>

И main.js файл:

$( "button#test" ).click(function(event) {

        var html = '/example.html';

        //Replaceing {{test}} in example.html with 'Hello, World!' string
        var insertProperty = function (string, propName, propValue) {
            var propToReplace = "{{" + propName + "}}";
            string = string
                .replace(new RegExp(propToReplace, "g"), propValue);
            return string;
        }
        var replacedhtml = insertProperty(html,"test", 'Hello, World!');

        return console.log(replacedhtml);
    });

Что я сейчас получаю в журнале:

/example.html

Что я ожидаю:

<span>
Hello, World!
</span>

И должен быть более элегантный способ вставить свойство, чем мой insertProperty функция.

Answer 1

Пишу var html = '/example.html' создает строку, а не извлекает HTML-текст из файла. Вместо этого используйте $.ajax асинхронно запрашивать файл и что-то делать с его текстом.

$('#test').click(function () {

  $.ajax({
    url: '/example.html',
    success: function (html) {

      //Replacing {{test}} in example.html with 'Hello, World!' string
      function insertProperty (string, propName, propValue) {
        return string.replace(new RegExp('{{' + propName + '}}', 'g'), propValue)
      }

      console.log(insertProperty(html, 'test', 'Hello, World!'))
    }
  })

})