JavaScriptを使って、マスタッシュ構文を実装する【HTMLのソースを置き換える】

スポンサーリンク

VueJSのマスタッシュ構文をとても便利だと感じたため、同じような処理を実装してみることにしました。

HTMLのソースを置き換える

マスタッシュ構文と同じく二重の波かっこで囲んだ部分を「aiueo」という文字に置き換えます。

{{test}}
<script>
var html = document.getElementsByTagName('html')[0];
html.innerHTML = html.innerHTML.replace(new RegExp("{{test}}","g"),"aiueo");
</script>

今回は、「{{test}}」を「aiueo」に置き換えます。

マスタッシュ構文を実装する

<input type="text" value="aiueo" moustache="test"/>
{{test}}
<script>
!function(){
    var moustache = document.querySelectorAll('[moustache]');
    var html = document.getElementsByTagName('html')[0];


    for (var i = 0; moustache.length > i; i++){
        var name = moustache[i].getAttribute('moustache');
        var value = moustache[i].value;
        html.innerHTML = html.innerHTML.replace(new RegExp("{{"+name+"}}","g"),"<span moustache-output='" +name+ "'>" +value+ "</span>");
    }

    var moustacheChange = function(e){ 
        var mn = e.srcElement.getAttribute('moustache');
        if(!mn) return false;
        var mnList = document.querySelectorAll('[moustache-output ="' +mn+ '"]');
        for (var i = 0; mnList.length > i; i++){
            mnList[i].innerText =  e.srcElement.value;
        }
    };
    document.addEventListener('change', moustacheChange);
}();
</script>

moustacheという属性を付けた要素があった場合に、その属性に与えた値の{{}}を探し、見つけた場合には、moustache属性を持った要素のvalueを渡します。

一度置き換えた後も、継続して値を更新できるようにするために、置き換える値は「moustache-output」というクラスを渡し、マーキングしておきます。

もし、値が変化することがあれば、addEventListenerのchangeを使用し、その要素にmoustache属性がついていれば、値を更新します。

スポンサーリンク

IT, javascript

Posted by took