2017-09-14 14 views
0

ここは私のコードコードhttps://codepen.io/syedsadiqali/full/BwaMEWです。 私はfreecodecampによってWikipediaビューアプロジェクトを作成しようとしています。私はWikipedia APIのスニペットを除いてすべてうまくいっていますが、HTMLエンティティはデコードできず、スパンタグは置き換えられません。私は多くのことを試みました。助けが必要です。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://stackoverflow.com/questions/12834419/text-as-html-in-mustache-js –

+0

が必要です。兄。どうもありがとう。それに答える、私はそれを受け入れるだろう。 –

答えて

0

@Paulアボットは、私はHTMLのようなオブジェクトからデータをレンダリングするために、{{{スニペット}}}三重口ひげを使用するために必要なコメントとして。答えのおかげで、この答えは、私はこの質問の答えを閉じるために書いています@PaulAbbottによって与えられました。再度、感謝します。

関連する問題