再利用可能なHTML文字列オブジェクトを作成するにはどうすればよいですか？

Question

HTML Webページに再利用可能な文字列を作成するにはどうすればよいですか？

私は私のウェブページを通じて、小さな文字列「オブジェクト」として再利用できるようにHTMLの次の行をしたいと思います：

[<span class="sgreentxt">root</span>@<span class="sbluetxt">localhost</span> <span class="sorangetxt">~ </span>] 

されるであろう「[ルート@ localhostの〜]」webrowserによって解釈として画面に表示される。

このオブジェクトは "cli = [root @ localhost〜]"と同等なので、長い長い文字列を入力するのではなく、 "cli"のようなものを入力するだけで、htmlはjavascriptの文字列printlineか何かを出力し、代わりにhtmlと解釈されて適切に表示される他のコードを出力します。私はこれをどのように達成し、同じウェブページを通して何度もやり遂げることができます。注：document.getElementById（）は、Webページごとに1回しか動作しません。

Answer 1

そこには素晴らしいクライアントサイドのテンプレートライブラリがあります。個人的にはhttp://handlebarsjs.com/が好きです。これは私にとってはサーバー側のもののように見えます。おそらくあなたのサーバーはあなたのためにこれを行う必要があります。あなたが本当にそれをクライアント側にしたいと思っていて、彼らのがにSEOの意味とFOUSCの成果物があり、適切なテンプレートライブラリがあまりにも多すぎると気にしないなら、このようなことをするかもしれません。

var template = "[<span class=\"sgreentxt\">root</span>@<span class=\"sbluetxt\">localhost</span> <span class=\"sorangetxt\">~ </span>]"; 
 
var targets = Array.from(document.querySelectorAll("[data-replace='cli']")); 
 
targets.forEach(function(target) { target.outerHTML = template; });

<ul> 
 
    <li><span data-replace="cli"></span></li> 
 
    <li><span data-replace="cli"></span></li> 
 
    <li><span data-replace="cli"></span></li> 
 
    <li><span data-replace="cli"></span></li> 
 
</ul>