Javascript添加动态HTML的字符串问题

Posted 2023-05-07

【中文标题】Javascript添加动态HTML的字符串问题

【英文标题】：String issue with Javascript adding dynamic HTML

【发布时间】：2011-09-14 07:22:14

【问题描述】：

我正在使用 php 生成一个 javascript 按钮，该按钮添加了一个复选框和一些其他 html。

转义这些字符以将它们包含在 onclick 事件中的正确方法是什么？

我看到有人建议将 ' 和 " 转换为 ascii 值，但这似乎没有帮助。

$tempOutput = "<a href='temp.txt'>\"Happy\"</a>";
$tempOutput = str_replace("'", "&#39;", $tempOutput);
$tempOutput = str_replace('"', "&quot;", $tempOutput);

如果您在使用前回显字符串，只会导致此结果：

<a href=&#39;temp.txt&#39;>&quot;Happy&quot;</a>

如果你检查页面元素：

<a onclick="
                    var divTag = document.createElement('div');
                    divTag.innerHTML = '&lt;a href='temp.txt'&gt;&quot;Happy&quot;&lt;/a&gt;';
                    document.getElementById('extraDiv').appendChild(divTag) ;
                ">test</a>

我也尝试过仅附加到 extradiv 的 innerHTML，但也没有成功。

【参考方案1】：

我主要使用 PHP 的 rawurlencode() 和 Javascript 的 unescape()：

  <?php
    $tempOutput = '<a href="temp.txt">'.htmlentities('"Happy"').'</a>';
  ?>
  <a onclick="
              var divTag = document.createElement('div');
              divTag.innerHTML = unescape('<?php echo rawurlencode($tempOutput);?>');
              document.getElementById('extraDiv').appendChild(divTag) ;
             ">test</a>
  <div id="extraDiv"></div>

这也将避免其他字符的错误，例如换行符。

【讨论】：

谢谢。除了您必须先执行 htmlentities() 之外，此方法有效。我基本上不能这样做，因为 HTML 是从另一个来源返回的。在将其放入 onclick 之前，我不会立即生成它。整个字符串上的 htmlentities() 并不完全有效。只要 HTML 中的任何文本中没有双引号，基本上一切都可以。

【参考方案2】：

这样逃跑

$tempOutput = str_replace(array("'",'"'), array("\'",'"'), $tempOutput);

【讨论】：

这适用于非常简单的示例，但对于更复杂的示例再次抛出错误，但这是一个开始，谢谢。

【参考方案3】：

使用html_entity_decode

【讨论】：

我想我想要的恰恰相反，但谢谢。我的输入已经是这种格式了。