Использовать переменную внутри блока CDATA, в Javascript? - PullRequest
Новая
       13

Использовать переменную внутри блока CDATA, в Javascript?

3 голосов
/ 09 января 2011

CDATA -блоки отлично работают для кодирования больших блоков 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$ отобразить как «Фридрих Хайек» вместо «$ FullName $»?

Обратите внимание, что существует более одной переменной, и каждая переменная может использоваться несколько раз в блоке CDATA.


Пример альтернативного кода: 

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

Нужно установить для атрибута цвета значение red.

Ответы [ 3 ]

5 голосов
/ 25 марта 2011

Это достаточно элегантно? 

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

EDIT

Как насчет того, чтобы сделать второй параметр необязательным? 

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);
3 голосов
/ 09 января 2011 
ProfileCode=ProfileCode.replace('$FullName$',FullName);
1 голос
/ 09 января 2011

После очистки спецификации CDATA и этой статьи "CDATA Confusion" кажется, что разделы CDATA обрабатывают все как чистый текст, за исключением объектов символьных данных и конца разделамаркер (]]>).Например, 

var x = $('<!DOCTYPE X[<!ENTITY foo "BAR">]><z> cc &#65; &foo;</z>');
console.log ($(x, 'z').text() );

Выход: ]> cc A &foo;

Таким образом, в разделе CDATA нет способа подстановки переменных.Лучшее, что мы можем сделать, это запустить и остановить разделы, например: 

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

                        Name: ]]></>).toString () + FullName+ (<><![CDATA[

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

- что явно недопустимо.

Практический обходной путь:

Это никому не поможет в поиске решения CDATA (которое, как мы теперь знаем, невозможно, согласно спецификации).Но так как мы просто использовали CDATA в качестве метода для генерации сложной строки, мы можем очистить строку впоследствии, согласно ответу Ратны Динакара.

Функция, которую мы в итоге использовали: 

function sSetVarValues (sSrcStr, sReplaceList /* , Variable */)
/*--- function sSetVarValues takes a string and substitutes marked
    locations with the values of the variables represented.
    Conceptually, sSetVarValues() operates a little like sprintf().

    Parameters:
        sSrcStr         --  The source string to be replaced.   
        sReplaceList    --  A string containing a comma-separated list of variable
                            names expected in the raw string.  For example, if 
                            sReplaceList was "Var_A", we would expect (but not require)
                            that sSrcStr contained one or more "$Var_A$" substrings.
        *Variable*      --  A variable-length set of parameters, containing the values
                            of the variables specified in sReplaceList.  For example,
                            if sReplaceList was "Var_A, Var_B, Var_C", then there better 
                            be 3 parameters after sReplaceList in the function call. 
    Returns:                The replaced string.
*/
{
    if (!sSrcStr)       return null;
    if (!sReplaceList)  return null;

    var aReplaceList    = sReplaceList.split (/,\s?/);

    for (var J = aReplaceList.length-1;  J >= 0;  --J)
    {
        var zRepVar     = new RegExp ('\\$' + aReplaceList[J] + '\\$', "g");
        sSrcStr         = sSrcStr.replace (zRepVar, arguments[J+2]);
    }
    return sSrcStr;
}


Пример использования: 

var AAA     = 'first';
var BBB     = 'second'; 
var CCC     = 'third';
var Before  = "1 is $AAA$, 2 is $BBB$, 3 is $CCC$";

var After   = sSetVarValues (Before, "AAA, BBB, CCC", AAA, BBB, CCC);

console.log (Before);
console.log (After);

Выход: 

    1 is $AAA$, 2 is $BBB$, 3 is $CCC$
    1 is first, 2 is second, 3 is third
...