javascript - 在 Javascript 中使用 CDATA block 内的变量？

Question

CDATA - block 非常适合将大块 HTML 或 CSS 编码为字符串。但是，我不知道如何在其中使用变量值。

例如，考虑这段 JavaScript 代码:

var FullName    = "Friedrich Hayek";
var ProfileCode = (<><![CDATA[
                    <div id="BigHonkingChunkO_HTML">
                        ...Lot's o' code...

                        Name: $FullName$
                        Birth: $Birthdate$

                        ...Lot's o' code...

                        ... $FullName$ ...

                        ...Lot's o' code...
                    </div>
                ]]></>).toString ();

如何让 $FullName$ 呈现为“Friedrich Hayek”而不是“$FullName$”？

请注意，有多个变量，每个变量都可以在 CDATA block 中使用几次。

备用代码示例:

var UserColorPref   = "red";
var UI_CSS          = (<><![CDATA[
                        body {
                            color:              $UserColorPref$;
                        }
                    ]]></>).toString ();

希望将颜色属性设置为 red。

Answer 1

够优雅吗？

function replaceVars(content, vars)
{
    return content.replace(/\$(\w+)\$/g, function($0, $1)
    {
        return ($1 in vars ? vars[$1] : $0);
    });
}

ProfileCode = replaceVars(ProfileCode, {"FullName" : "Friedrich Hayek"});

如果关联键并不重要，您可以随时选择使用:
sprintf或 vsprintf

编辑

将第二个参数设为可选怎么样？

function replaceVars(content, scope) {
    if (!scope || typeof scope != "object") {
        scope = this;
    }

    return content.replace(/\$(\w+)\$/g, function($0, $1) {
        return ($1 in scope ? scope[$1] : $0);
    });
}

// example1
var FullName = "Friedrich Hayek";
ProfileCode = replaceVars(ProfileCode);

// example2
var vars = {"FullName" : "Friedrich Hayek"};
ProfileCode = replaceVars(ProfileCode, vars);