javascript - Textarea 不会从数据库渲染换行符

Question

我有两个<textarea>网页上的元素。当用户在第一个中提交文本时 <textarea> ，文本被插入到数据库中。然后从数据库中检索文本并将其存储在第二个 <textarea> 中。使用 JavaScript。

如果数据库中的字符包含换行符，第二个文本区域不会呈现文本。

如果我输入一个没有换行符的单词，一切都会很好:

但是下面这个不起作用。

var_dump($output) 对于

    n
    e
    w
    l
    i
    n
    e

是

string(19) "n e w l i n e"

我的代码:

HTML

<form action="" method="get">
  <textarea name="input" rows="5"></textarea> <br>
  <input type="submit" name="go"><br>
  <textarea name="output" id="id_ouput" rows="5"></textarea>
</form>

PHP

<?php
...
...
$input=$_GET['input'];

$insert = $koneksi->query("insert into data values ('".$input."')");
$select = $koneksi->query("SELECT * FROM data"); // data is column
foreach ($select as $tampung){
    $output = $tampung['text'];
}

// use JS to access <textarea>' value attribute
?>
     <script>
         document.getElementById('id_ouput').value= "<?php echo $output ?>";
     </script>
<?php

...

?>

Answer 1

问题在于您的 PHP 代码输出格式错误的 JavaScript 字符串文字。

根据ECMA-262 ，双引号字符串文字可以包含任何源字符，但双引号 ( " )、反斜杠 ( \ ) 和 LineTerminator 除外 个字符，其中 LineTerminator 是以下之一

• \u000A (换行)
• \u000D (回车)
• \u2028 (行分隔符)
• \u2029 (段落分隔符)

您需要将这些字符转换为合适的 JavaScript 转义序列，并且还必须转换 <和 &在 HTML 文档中具有特殊含义的字符。

大多数字符都是简单的 ASCII 字符，这使得使用 strtr() 替换它们很简单。带有翻译表，假设您的 HTML 文档使用合理的(ASCII 兼容)字符编码。

行和段落分隔符比较棘手，因为翻译将取决于 HTML 文档使用的字符编码。如果您使用 UTF-8，则可以将这些字符添加到转换表中，如下所示:

<?php

  $conversion = array (
    '<'            => '&lt;',
    '&'            => '&amp;',
    '"'            => '\\"',
    '\\'           => '\\\\',
    "\r"           => '\\r',
    "\n"           => '\\n',
    "\xe2\x80\xa8" => '\\u2028',
    "\xe2\x80\xa9" => '\\u2029',
  );

  $output = $tampung['text'];
  $value = strtr ($output, $conversion);

  echo <<<_
<script>
     document.getElementById('id_ouput').value="$value";
</script>
_;

PHP addcslashes() 文档的评论部分有类似的解决方案。

<小时/>

当然，一个更简单的解决方案是输出 <textarea>直接从 PHP 获取值:

<?php

  $output = $tampung['text'];
  $value = htmlspecialchars ($output);

  echo <<<_
    <textarea name="output" id="id_ouput" rows="5">$value</textarea>

_;

但我猜你的情况可能会更复杂一些。