在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;

THis是铬元素检查器的屏幕截图。我将数据插入到div deformvragen中。

​

​

有人知道我做错了什么吗？

编辑：

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 to mysql文件中的方法：

$convertcontent = htmlentities($content, ENT_QUOTES);

然后我把它保存在MySQL数据库中。有没有可能表的编码不正确？

Answer 1

&lt =小于=<

&gt =大于=>

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

正如评论中所说，在插入到数据库之前，您需要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

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

  <?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);
  ?>