javascript - 将 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!'))
    }
  })

})