标签：

在前端使用 textarea 存储内容到数据库时，换行符通常会在数据库中以 \n 的形式保存。在将其从数据库中取回并进行回显时，需要将这些换行符转换为适合在 HTML 中显示的格式。以下是实现这一功能的步骤。

步骤 1: 前端 textarea 提交内容

将内容从 textarea 中提交到服务器，并保存到数据库中。例如：

<form method="post" action="/submit">
    <textarea name="content"></textarea>
    <button type="submit">提交</button>
</form>

Copy
HTML

步骤 2: 服务器端处理

在接收和保存内容到数据库时，确认换行符会作为 \n 存储。

// 假设使用 PHP PSR-7 或其它相关框架
$content = $_POST['content'];
// 存入数据库
$db->query("INSERT INTO your_table (content) VALUES (?)", [$content]);

Copy
PHP

步骤 3: 从数据库回显内容

在获取内容并回显时，需要将数据库中保存的 \n 转换成 HTML 的换行标记 <br/>。

1. 服务器端转换

$contentFromDB = $db->query("SELECT content FROM your_table WHERE id = ?", [$id])->fetchColumn();
$formattedContent = nl2br(htmlspecialchars($contentFromDB, ENT_QUOTES, 'UTF-8'));

Copy
PHP

在这里，nl2br() 函数将换行符转成 <br/>，而 htmlspecialchars() 函数用于避免 XSS 攻击。

2. 前端回显

在前端视图中，使用 innerHTML 或类似方法将处理后的内容显示出来。

<div id="output">{{ formattedContent }}</div>

Copy
HTML

如果你使用的是 JavaScript 框架（例如 Vue.js 或 React），可以使用对应的语法来渲染 HTML。

例子

以下是一个简单的示例，展示如何将内容从 textarea 提交到数据库，并在回显时处理换行符。

HTML 视图

<form method="post" action="/submit">
    <textarea name="content"></textarea>
    <button type="submit">提交</button>
</form>

<div id="output">{{ formattedContent }}</div>

Copy
HTML

JavaScript 逻辑（假设使用 Vue.js）

new Vue({
  el: '#app',
  data() {
    return {
      formattedContent: ''
    }
  },
  mounted() {
    fetch('/get-content?id=1') // 假设用 ID 获取内容
      .then(response => response.json())
      .then(data => {
        this.formattedContent = data.content.replace(/\n/g, '<br/>'); // 替换换行符
      });
  }
});

Copy
JavaScript

小结

1. 存储：确保在存储时 textarea 的内容包括换行符 \n 。
2. 获取并转换：从数据库获取内容时，将 \n 转换为 <br/>。
3. 渲染：使用适当的方法（如 innerHTML）渲染回显内容。

这样就能在前端显示内容时保持换行效果。

标签：
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。