Assign HTML-Schnipsel zu JS Variable

Question

Ich habe eine example.html Datei:

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

Und eine main.js Datei:

$("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); 
    }); 

Was ich zur Zeit in Protokoll erhalten:

/example.html 

Was ich erwarten:

<span> 
Hello, World! 
</span> 

Und es sollte eine elegantere Möglichkeit zum Einfügen von Eigenschaften als meine insertProperty Funktion geben.

Answer 1

Schreiben var html = '/example.html' erstellt eine Zeichenfolge, anstatt den HTML-Text aus einer Datei abzurufen. Verwenden Sie stattdessen $.ajax, um die Datei asynchron anzufordern und etwas mit ihrem Text zu tun.

$('#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!')) 
 
    } 
 
    }) 
 

 
})