将HTML代码段分配给JS变量

时间:2017-02-25 16:52:57

标签: javascript inserthtml

我有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函数更优雅的方式来插入属性。

1 个答案:

答案 0 :(得分: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!'))
    }
  })

})