在 Mysql 中插入纯 HTML 并检索 HTML 以显示在页面上

Question

我的申请有问题。它是一个表单生成器，您可以构建自己的表单，并在以后使用该表单。由表单生成器创建的表单的生成 HTML 代码，我将其插入 MySQL 数据库。

但如果我想从数据库中取出表单，则 HTML 显示不正确。可能是因为引号。这是一些数据：

&lt;form class="form-horizontal" &gt;<fieldset>

这是插入数据库的数据的一部分。你可以看到它转换了一些字符，但这并不一定是个问题，因为它是稍后被隐藏的所有 HTML 代码。

这是我使用 jQuery 和 AJAX 将此数据插入到我的页面时得到的结果：

&lt;form class="form-horizontal" &gt;<fieldset>&lt;!-- Form Name --&gt;<legend>Hubert</legend></fieldset>&lt;/form&gt;

这是 chrome 检查器的屏幕截图。我将数据插入到 div 中。

有人知道我做错了什么？

编辑：

HTMLENTITIES 不起作用，我在浏览器中将其作为输出，但引号仍然存在，因此表单无法正确显示。

<div class="deformvragen">&lt;form class="form-horizontal" &gt;
<fieldset>

&lt;!-- Form Name --&gt;
<legend>FOrm Numero 4</legend>

&lt;!-- Text input--&gt;
<div class="control-group">
  <label class="control-label" for="textinput-0">Text Input</label>
  <div class="controls">
    &lt;input id="textinput-0" name="textinput-0" type="text" placeholder="placeholder" class="input-xlarge"&gt;
    <p class="help-block">help</p>
  </div>
</div>

&lt;!-- Text input--&gt;
<div class="control-group">
  <label class="control-label" for="textinput-5">Text Input</label>
  <div class="controls">
    &lt;input id="textinput-5" name="textinput-5" type="text" placeholder="placeholder" class="input-xlarge"&gt;
    <p class="help-block">help</p>
  </div>
</div>

&lt;!-- Text input--&gt;
<div class="control-group">
  <label class="control-label" for="textinput-4">Text Input</label>
  <div class="controls">
    &lt;input id="textinput-4" name="textinput-4" type="text" placeholder="placeholder" class="input-xlarge"&gt;
    <p class="help-block">help</p>
  </div>
</div>

&lt;!-- Text input--&gt;
<div class="control-group">
  <label class="control-label" for="textinput-3">Text Input</label>
  <div class="controls">
    &lt;input id="textinput-3" name="textinput-3" type="text" placeholder="placeholder" class="input-xlarge"&gt;
    <p class="help-block">help</p>
  </div>
</div>

&lt;!-- Text input--&gt;
<div class="control-group">
  <label class="control-label" for="textinput-2">Text Input</label>
  <div class="controls">
    &lt;input id="textinput-2" name="textinput-2" type="text" placeholder="placeholder" class="input-xlarge"&gt;
    <p class="help-block">help</p>
  </div>
</div>

&lt;!-- Text input--&gt;
<div class="control-group">
  <label class="control-label" for="textinput-1">Text Input</label>
  <div class="controls">
    &lt;input id="textinput-1" name="textinput-1" type="text" placeholder="placeholder" class="input-xlarge"&gt;
    <p class="help-block">help</p>
  </div>
</div>

</fieldset>
&lt;/form&gt;
</div>

这就是我在我的 php 到 mysql 文件中的做法：

$convertcontent = htmlentities($content, ENT_QUOTES);

然后我将它保存在 MySQL 数据库中。会不会是表格的编码不对？

Answer 1

&lt = 小于 =

&gt = 大于 = >

在数据库中插入的方式不正确。

如cmets中所说，插入数据库前需要htmlentities()。

Answer 2

我猜你正在使用 PHP 使用函数htmlspecialchars_decode。 更多信息，这里是链接http://php.net/manual/en/function.htmlspecialchars-decode.php

Answer 3

如果您在客户端执行此操作，您可以使用以下代码：

   var htmlEntities = {
      encode : function htmlEscape(str, flag) {
          var htmlToString = String(str)
                  .replace(/"/g, '"')
                  .replace(/'/g, ''')
                  .replace(/</g, '&lt;')
                  .replace(/>/g, '&gt;');
          if(flag) {
              // if flag == false don't encode "&" symbole
              htmlToString.replace(/&/g, '&amp;');
          }
          return htmlToString;
      },
      decode : function(str) {
        var element = document.createElement('div');
        if(str && typeof str === 'string') {
          // strip script/html tags
          str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
          str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
          element.innerHTML = str;
          str = element.textContent;
          element.textContent = '';
        }
        return str;
      }
  };

从控制台举例说明它是如何工作的：

htmlEntities.encode('&lt;form class="form-horizontal" &gt;<fieldset>&lt;!-- Form Name --&gt;<legend>Hubert</legend></fieldset>&lt;/form&gt', false)

"&lt;form class=&quot;form-horizontal&quot; &gt;&lt;fieldset&gt;&lt;!-- Form Name --&gt;&lt;legend&gt;Hubert&lt;/legend&gt;&lt;/fieldset&gt;&lt;/form&gt"

htmlEntities.decode('&lt;form class=&quot;form-horizontal&quot; &gt;&lt;fieldset&gt;&lt;!-- Form Name --&gt;&lt;legend&gt;Hubert&lt;/legend&gt;&lt;/fieldset&gt;&lt;/form&gt');

"<form class="form-horizontal" ><fieldset><!-- Form Name --><legend>Hubert</legend></fieldset></form>"

如果您使用 php 使用 base64_encode(string $data) 和 base64_decode(string $data) 的最佳和安全方式

    <?php
       $str = 'This is an encoded string';
       echo base64_encode($str);
    ?>

输出：VGhpcyBpcyBhbiBlbmNvZGVkIHN0cmluZw== http://php.net/manual/en/function.base64-encode.php

或 htmlentities($str) - http://php.net/manual/en/function.htmlentities.php

  <?php
      $str = "A 'quote' is <b>bold</b>";
      // Outputs: A 'quote' is &lt;b&gt;bold&lt;/b&gt;
      echo htmlentities($str);
      // Outputs: A &#039;quote&#039; is &lt;b&gt;bold&lt;/b&gt;
      echo htmlentities($str, ENT_QUOTES);
  ?>

Answer 4

我自己最终找到了答案。插入数据库很顺利。我只需要做几件事。

首先我需要使用 PHP 对字符串进行解码，然后将其发送到我的客户端应用程序：

htmlspecialchars_decode

然后在我的客户端应用程序中，我使用 javascript 来修剪结果：

var html = $.trim(r);
$$('#formvragenhier').html(html);

然后我将它插入到我的应用程序中，HTML 就正确显示了！