如何在实时预览中替换文本变量？

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 来显示实时预览，同时它用它们的值替换变量吗？

如果你愿意帮忙，这里有一个方便的小提琴：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);

Answer 2

$('textarea').on('keyup', function() {
    var message = this.value.replace(/%(.*?)\S+/g, function(val) {
        var elem = $('dt').filter(function() {
            return $(this).text() == val;
        });
        return elem.length ? elem.next('dd').text() : '';
    });

    $('#preview').text(message);
});

FIDDLE