使用 innerhtml 编写带有 A LOT 引号的 html

Posted 2023-05-07

技术标签:

【中文标题】使用 innerhtml 编写带有 A LOT 引号的 html【英文标题】：Using innerhtml to write html with A LOT of quotes 【发布时间】：2011-09-26 17:11:31 【问题描述】：

我正在尝试调用一个将很长的 html 字符串写入元素的函数。该字符串将与此类似；

   '<div id='gaugearray8'>
<p id='ANCPUB' class='plot' style='height:100px;width:175px;float:left;' title='0.0011217599587192' onClick=LowerLevelPrint(["NumberSelected":1,"TargetPerc":[237.5],"KpiDescription":["Contribution&nbspof&nbspExternal&nbspRevenue"],"KpiName":["revcontrubionkpi"],"ValuetoPrint":[0.0011217599587192],"ValueNow":[19],"ValueCompare":[1693767],"Target":["8"],"KpiUnits":["Pounds"],"PercentCompare":[0.0011217599587192]]) onmouseover=TopLevelLabel("NumberSelected":1,"Description":["Contribution&nbspof&nbspExternal&nbspRevenue"],"GroupDescription":"Ancillary&nbspService&nbspPerformance") onmouseout=clearnew()></p>
<p id='CSPUB' class='plot' style='height:100px;width:175px;float:left;' title='21.855170547342' onClick=LowerLevelPrint(["NumberSelected":7,"TargetPerc":[206.03360584712,8.8767313176762,10.356186537289,12.5,12.5,237.5,10.356186537289],"KpiDescription":["Operating&nbspCost&nbspper&nbspService&nbspKm","Revenue&nbspper&nbspService&nbspKm","Total&nbspCost&nbspper&nbspService&nbspKm","Claims&nbspCost&nbspper&nbspVehicle","Claims&nbspCost&nbspper&nbspDriver","Number&nbspof&nbspClaims&nbspLodged&nbspper&nbsp100,000km","Overheads&nbspCost&nbspper&nbspService&nbspKm"],"KpiName":["opcostperkmkpi","revenueperkmkpi","totalcostperkmkpi","claimspervehkpi","claimsperdriverkpi","claimslodgedkpi","overheadskpi"],"ValuetoPrint":[110.47252736225,5.6435200058102,5.434671444334,0.35610369406272,0.35829645079956,12.666666666667,18.054408207469],"ValueNow":[10.301680292356,0.62137119223733,0.62137119223733,1,1,19,0.62137119223733],"ValueCompare":[9.32510601353,11.010348002623,11.433463800009,280.81708128079,279.09849449204,150,3.4416591510336],"Target":["5","7","6","8","8","8","6"],"KpiUnits":["Pounds&nbspper&nbspKm","Pounds&nbspper&nbspKm","Pounds&nbspper&nbspKm","Pounds&nbspper&nbspVehicle","Pounds&nbspper&nbspDriver","Claims","Pounds&nbspa&nbspkm"],"PercentCompare":[110.47252736225,5.6435200058102,5.434671444334,0.35610369406272,0.35829645079956,12.666666666667,18.054408207469]]) onmouseover=TopLevelLabel("NumberSelected":7,"Description":["Operating&nbspCost&nbspper&nbspService&nbspKm","Revenue&nbspper&nbspService&nbspKm","Total&nbspCost&nbspper&nbspService&nbspKm","Claims&nbspCost&nbspper&nbspVehicle","Claims&nbspCost&nbspper&nbspDriver","Number&nbspof&nbspClaims&nbspLodged&nbspper&nbsp100,000km","Overheads&nbspCost&nbspper&nbspService&nbspKm"],"GroupDescription":"Core&nbspService&nbspPerformance") onmouseout=clearnew()></p>
<p id='ROPTUB' class='plot' style='height:100px;width:175px;float:left;' title='9.7292765723395' onClick=LowerLevelPrint(["NumberSelected":2,"TargetPerc":[12.5,207.23684210526],"KpiDescription":["Revenue&nbspExpenditure&nbspper&nbspPassenger&nbspJourney","Cost&nbspPer&nbspHeadcount"],"KpiName":["revexperjourneykpi","coststaffkpi"],"ValuetoPrint":[19.044041148259,0.41451199641943],"ValueNow":[1,16.578947368421],"ValueCompare":[5.2509863437855,3999.6302909519],"Target":["8","8"],"KpiUnits":["Pounds&nbspper&nbspJourney","Pounds&nbspper&nbspStaff"],"PercentCompare":[19.044041148259,0.41451199641943]]) onmouseover=TopLevelLabel("NumberSelected":2,"Description":["Revenue&nbspExpenditure&nbspper&nbspPassenger&nbspJourney","Cost&nbspPer&nbspHeadcount"],"GroupDescription":"Resource&nbspOptimisation") onmouseout=clearnew()></p></div>';

不要担心剖析它，因为它只是可以发送的示例。我假设问题是这个字符串中有大量引号，因为当我包含这个函数时，页面上的 javascript 完全停止工作。

上面的字符串实际上是在一个php循环中生成的，我尝试使用的函数调用尝试

 document.getElementById('financearea').innerHTML = 
   '<?php $myview->PopulateContent($finance, 8, 'ub', 'UB', $a); ?>';

` 当它在主页正文中时可以正常工作，但在使用 innerHTML 方法时不会运行。

有人对这如何工作有任何建议吗？

这是 php 端的代码 - 它在循环中创建和回显

$thisgoesinfile = "<p id='".$Group.$Depot."' class='plot' style='height:100px;width:175px;float:left;' title='".$TotalValuetoPrint."' onClick=LowerLevelPrint(".json_encode($result_set).") onmouseover=TopLevelLabel(".json_encode($Descriptions).") onmouseout=clearnew()></p>";

编辑：我尝试删除 php 字符串中的所有单引号，所以现在字符串看起来像

document.getElementById('financearea').innerHTML = <div id=gaugearray8><p id=ANCPUB class=plot style=height:100px;width:175px;float:left; title=0.0011217599587192 onClick=LowerLevelPrint(["NumberSelected":1,"TargetPerc":[237.5],"KpiDescription":["Contribution&nbspof&nbspExternal&nbspRevenue"],"KpiName":["revcontrubionkpi"],"ValuetoPrint":[0.0011217599587192],"ValueNow":[19],"ValueCompare":[1693767],"Target":["8"],"KpiUnits":["Pounds"],"PercentCompare":[0.0011217599587192]]) onmouseover=TopLevelLabel("NumberSelected":1,"Description":["Contribution&nbspof&nbspExternal&nbspRevenue"],"GroupDescription":"Ancillary&nbspService&nbspPerformance") onmouseout=clearnew()></p><p id=CSPUB class=plot style=height:100px;width:175px;float:left; title=21.855170547342 onClick=LowerLevelPrint(["NumberSelected":7,"TargetPerc":[206.03360584712,8.8767313176762,10.356186537289,12.5,12.5,237.5,10.356186537289],"KpiDescription":["Operating&nbspCost&nbspper&nbspService&nbspKm","Revenue&nbspper&nbspService&nbspKm","Total&nbspCost&nbspper&nbspService&nbspKm","Claims&nbspCost&nbspper&nbspVehicle","Claims&nbspCost&nbspper&nbspDriver","Number&nbspof&nbspClaims&nbspLodged&nbspper&nbsp100,000km","Overheads&nbspCost&nbspper&nbspService&nbspKm"],"KpiName":["opcostperkmkpi","revenueperkmkpi","totalcostperkmkpi","claimspervehkpi","claimsperdriverkpi","claimslodgedkpi","overheadskpi"],"ValuetoPrint":[110.47252736225,5.6435200058102,5.434671444334,0.35610369406272,0.35829645079956,12.666666666667,18.054408207469],"ValueNow":[10.301680292356,0.62137119223733,0.62137119223733,1,1,19,0.62137119223733],"ValueCompare":[9.32510601353,11.010348002623,11.433463800009,280.81708128079,279.09849449204,150,3.4416591510336],"Target":["5","7","6","8","8","8","6"],"KpiUnits":["Pounds&nbspper&nbspKm","Pounds&nbspper&nbspKm","Pounds&nbspper&nbspKm","Pounds&nbspper&nbspVehicle","Pounds&nbspper&nbspDriver","Claims","Pounds&nbspa&nbspkm"],"PercentCompare":[110.47252736225,5.6435200058102,5.434671444334,0.35610369406272,0.35829645079956,12.666666666667,18.054408207469]]) onmouseover=TopLevelLabel("NumberSelected":7,"Description":["Operating&nbspCost&nbspper&nbspService&nbspKm","Revenue&nbspper&nbspService&nbspKm","Total&nbspCost&nbspper&nbspService&nbspKm","Claims&nbspCost&nbspper&nbspVehicle","Claims&nbspCost&nbspper&nbspDriver","Number&nbspof&nbspClaims&nbspLodged&nbspper&nbsp100,000km","Overheads&nbspCost&nbspper&nbspService&nbspKm"],"GroupDescription":"Core&nbspService&nbspPerformance") onmouseout=clearnew()></p><p id=ROPTUB class=plot style=height:100px;width:175px;float:left; title=9.7292765723395 onClick=LowerLevelPrint(["NumberSelected":2,"TargetPerc":[12.5,207.23684210526],"KpiDescription":["Revenue&nbspExpenditure&nbspper&nbspPassenger&nbspJourney","Cost&nbspPer&nbspHeadcount"],"KpiName":["revexperjourneykpi","coststaffkpi"],"ValuetoPrint":[19.044041148259,0.41451199641943],"ValueNow":[1,16.578947368421],"ValueCompare":[5.2509863437855,3999.6302909519],"Target":["8","8"],"KpiUnits":["Pounds&nbspper&nbspJourney","Pounds&nbspper&nbspStaff"],"PercentCompare":[19.044041148259,0.41451199641943]]) onmouseover=TopLevelLabel("NumberSelected":2,"Description":["Revenue&nbspExpenditure&nbspper&nbspPassenger&nbspJourney","Cost&nbspPer&nbspHeadcount"],"GroupDescription":"Resource&nbspOptimisation") onmouseout=clearnew()></p></div>;

但还是不行。

【问题讨论】：

谢谢@Pekka，正在做这件事。我相信您应该在该字符串中使用单双引号，如果我没记错的话，javascript 会抱怨像unterminated string 之类的换行符。你看到了什么 JS 错误？没有错误，只是没有运行。双引号是通过 php 函数中的json_encode 自动生成的，所以不完全确定如何替换它们。 【参考方案1】：

使用json_encode 而不是自己将文本用单引号引起来：

document.getElementById('financearea').innerHTML = <?php echo json_encode($myview->PopulateContent($finance, 8, 'ub', 'UB', $a)); ?>;

当您将字符串传递给json_encode 时，它将被包裹在引号中，并且其中的任何引号和其他特殊字符都将被正确编码以用作JavaScript 文字字符串。（这是 JSON 是 JavaScript 文字语法的子集这一事实的副产品。）

（我还在那里添加了一个echo；我不是一个PHP头，所以如果不需要它就删除它，但你没有使用短标签，所以......）

【讨论】：

好主意。结果变量只需要稍微不同的寻址（variablename[0]） @Pekka：谢谢。为什么？我已经看到这种使用方式，再次假设传入的项目是字符串而不是对象...... 是的，没错。实际上，这比我的建议要好，因为我认为它也会处理换行符。删除我的 @Pekka：换行符、制表符等 :-) 包含此行会使页面上的 javascript 停止工作。如果我将其注释掉，则 js 将再次起作用。我已经在 php 中使用了 json_encode 来通过 onclick 传递一个数组（您可以在顶部脚本中看到 json 编码的数组）所以不确定这是否有区别？【参考方案2】：

转义 PHP 输出中的单引号！ :)

将'替换为\'

【讨论】：

你间接解决了我的问题。转义引号不起作用，所以我尝试完全删除单引号并删除js端的单引号，它起作用了。感谢您间接让我走上正确的道路 @steven 这是一个非常笨拙的解决方法，如果另一个级别的引号起作用，它将中断。我建议您使用json_encode() 方法【参考方案3】：

显然，您需要确保在字符串中转义引号，否则 Javascript 会中断。一个简单的解决方案是在字符串内使用双引号，并使用单引号分隔字符串。

'<div id="gaugearray8">'

【讨论】：

Pekka 的解决方案要好得多！ :) 在底部添加一行，显示代码的 php 端。虽然不会运行，但 PHP 似乎不喜欢我尝试用单引号分隔。

以上是关于使用 innerhtml 编写带有 A LOT 引号的 html的主要内容，如果未能解决你的问题，请参考以下文章

带有innerHtml循环的Javascript幻灯片不起作用

带有 InnerHtml 的 Javascript 变量不起作用

使用 javascript 或 jQuery 隐藏所有带有与数字“0”或自定义值匹配的文本或 innerHTML 的“a”元素

手把手带你通过API创建一个loT边缘应用

Pandas - 使用 to_csv 编写多索引行

通过 innerHTML 对 DOM 操作进行性能测试