如何解码html实体,我无法做到这一点?

如何解码html实体,我无法做到这一点?

问题描述:

这里是我的codepen https://codepen.io/syedsadiqali/full/BwaMEW。 我想通过freecodecamp制作一个Wikipedia查看器项目。除了*API的片段之外,一切都运行良好,HTML实体无法解码并且span标签无法替换。我尝试了很多东西。请帮助。如何解码html实体,我无法做到这一点?

HTML

 <div class="container"> 
    <div class="row row1"> 

    <div class="col-md-6 text-center"> 
     <div class="text-center"> 
     <h2 class="text-center">Welcome to <h2><h1><br> Wikipedia Viewer Project <br> </h1><h2>Search Something Random<br>or<br> Enter Value below.</h2> 
     </div> 
     <input type="text" id="querybox"> 
     <div> 
     <button class="btn btn-primary" id="querybutton">Search</button> 
     <div> 
      <a class="btn btn-primary" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Open Random Page</a> 
     </div> 

     <div class="data" id="put"></div> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div id="target" class="list-group"></div> 
      <script type="x-tmpl-mustache" id="template"> 
      {{#search}}<a href="https://en.wikipedia.org/?curid={{pageid}}" target="_blank" class="list-group-item"><h4 class="list-group-item-heading">{{title}}</h4><p class="list-group-item-text">{{{snippet}}}</p></a>{{/search}} 
</script> 
     </div> 
    </div> 
     <div class="row"> 

     </div> 
     <footer> 
    <h3 class='text-center'>Made with love by <a href="https://www.facebook.com/2k16syed" target="_blank"> Syed </a> Source Code would be soon available to you on my <a href="https://www.github.com/syedsadiqali" target="_blank">Github</a></h3> 
    </footer> 
</div> 

CSS

@import url('https://fonts.googleapis.com/css?family=Pacifico'); 
.row1{ 
    font-family:"Pacifico",sans-serif; 
} 
.btn{ 
    margin-top:10px; 
    padding:20px; 
    font-size:30px; 
} 
.row{ 
    margin-top:20px; 
} 
input{ 
    font-family:sans-serif!important; 
} 

的JavaScript

$("#querybutton").on("click",function(){ 

    data=document.getElementById("put");   query=document.getElementById("querybox").value; 
    url="https://wikipedia.org/w/api.php?action=query&format=json&prop=&list=search&srsearch=" + query + "&callback=?"; 
$.getJSON(url,function(json){ 

     var view=json.query; 

    var template = document.getElementById('template').innerHTML; 
    Mustache.parse(template); 

    // render the data into the template 
    var rendered = Mustache.render(template,view); 

    //Overwrite the contents of #target with the rendered HTML 
    document.getElementById('target').innerHTML = rendered; 


}); 
}); 

结果

https://codepen.io/syedsadiqali/full/BwaMEW

+0

您需要'{{{snippet}}} https://*.com/questions/12834419/text-as-html-in-mustache-js –

+0

工作。哥哥。非常感谢。回答我会接受。 –

如@保罗雅培评论我需要使用{{{代码段}}}三重小胡子从Object作为HTML呈现数据。感谢您的答案,这个答案我只是写封闭这个问题正确的答案是由@PaulAbbott。再次感谢。