这个问题我之前帮不少开发者解决过——核心就是特殊字符未正确转义导致的引号提前闭合，给你几个靠谱的解决方案：

方案一：后端输出前转义特殊字符 #

从SQL读取HTML内容后，在渲染到页面之前，对内容进行HTML实体转义，重点处理双引号、单引号、小于号、大于号这些特殊字符。不同后端语言的转义方法如下：

• PHP：使用htmlspecialchars()函数，指定ENT_QUOTES参数同时转义双引号和单引号：

  $html_content = "<p>this is a website <a href=\"https://example.com\">Click Here</a></p>";
  $escaped_content = htmlspecialchars($html_content, ENT_QUOTES, 'UTF-8');
  // 输出到input时：
  echo '<input type="text" value="' . $escaped_content . '">';
  

• Python（Django/Flask）：依赖模板引擎自动转义，或手动调用转义函数：

  # Django模板中直接使用变量会自动转义
  <input type="text" value="{{ html_content }}">
  # Flask/Jinja2可手动指定转义过滤器
  <input type="text" value="{{ html_content|escape }}">
  

• Node.js：使用he库或内置逻辑完成转义：

  const he = require('he');
  const escapedContent = he.encode(htmlContent, { useNamedReferences: true, quote: 'double' });
  // 渲染到页面时
  `<input type="text" value="${escapedContent}">`
  

转义后，HTML里的双引号会变成"，不会提前闭合input的value属性，就能完整显示内容了。

方案二：前端通过DOM API直接设置值 #

如果后端没法修改，或是通过AJAX异步获取数据，不要把HTML字符串直接拼到DOM结构里，而是用DOM API直接设置控件的value属性：

// 假设从AJAX请求拿到原始HTML数据
const htmlData = "<p>this is a website <a href=\"https://example.com\">Click Here</a></p>";

// 设置input的值
const inputElement = document.getElementById('your-input-id');
inputElement.value = htmlData;

// 设置textarea的值
const textareaElement = document.getElementById('your-textarea-id');
textareaElement.value = htmlData;

这种方式的好处是，DOM引擎会自动处理字符串里的特殊字符，不会把它们当作HTML语法解析，自然就不会出现引号闭合的问题，还能完整保留原始HTML代码。

额外注意事项 #

• 不要用innerHTML设置input/textarea的内容，这会解析HTML标签，导致内容变形甚至引发XSS安全问题；
• 用AJAX更新SQL时，确保发送数据到后端前正确编码（比如用JSON.stringify()或者FormData），后端接收后也要转义再存入数据库，避免数据存储时出现乱码或格式错误。

内容的提问来源于stack exchange，提问作者Suprin Aziz Talpur