javascript - 如何替换实时预览中的文本变量？

Question

我有一个包含相关变量及其值的定义列表。 (也参见 fiddle)

<dl id="myVars">
    <dt class="var-name">%name%</dt>
    <dd class="var-name">Joe Sample</dd>
    <dt class="var-phone">%phone%</dt>
    <dd class="var-phone">555-1212</dd>
</dl>

我还有一个文本区域，可以在文本中使用上述任何变量。例如:

<textarea>Hello %name%, is this still the right phone number: %phone%?</textarea>

最后有一个预览 div，您可以在其中看到变量被替换后的解释文本。像这样:

<div id="preview"></div>

你能帮我想出一种有效的方法来使用 jQuery 显示实时预览，同时用变量的值替换变量吗？

如果您想提供帮助，这里有一个方便的 fiddle :http://jsfiddle.net/XAzZr/

Answer 1

http://jsfiddle.net/NFtVc/

var subst = {}, // store substitutions in an object to eliminate DOM lookups
    substRegex = /(.*)%(\S*)%(.*)$/i;

function defineSubst(){
    $("#myVars dd").each(function(){
        var cls = this.className.split(' '),
            l = cls.length;
        while (l--){
            if (cls[l].indexOf('var-') == 0)   
               subst[cls[l].replace(/var-/, "")] = this.innerHTML;   
        } 
    });
}

function getSubst(key){
    if (typeof subst[key] == "undefined")
        return "[INVALID CODE]";
    else
        return subst[key];        
}

function updatePreview(){
     var txt = $('textarea').val().split(' '),
        newTxts = [],
        regex = /(.*)%(\S*)%(.*)$/i;

    $.each(txt, function(){
        var m = substRegex.exec(this);
        if (m)
            newTxts.push(m[1] + getSubst(m[2]) + m[3]);
        else
            newTxts.push(this);
    });

    $("#preview").text(newTxts.join(' '));  
}

$('document').ready(defineSubst);
$('textarea').keyup(updatePreview);