1

関連する変数とその値を含む定義リストがあります。（フィドルも参照）

<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/

4

2 に答える 2

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);
于 2013-06-07T19:37:51.033 に答える