[英]Use a variable inside a CDATA block, in Javascript?
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塊中使用幾次。
替代代碼示例:
var UserColorPref = "red";
var UI_CSS = (<><![CDATA[
body {
color: $UserColorPref$;
}
]]></>).toString ();
希望將顏色屬性設置為red
。
它夠優雅嗎?
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);
ProfileCode=ProfileCode.replace('$FullName$',FullName);
在搜索了CDATA規范和這篇“CDATA Confusion”文章之后 ,似乎CDATA部分將所有內容都視為純文本,除了字符數據實體和部分結束標記( ]]>
)。 例如,
var x = $('<!DOCTYPE X[<!ENTITY foo "BAR">]><z> cc A &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作為生成復雜字符串的方法,因此我們可以根據Ratna Dinakar的回答清理字符串。
我們最終使用的功能是:
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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.