传单标记弹出文本中的换行符

Question

我有一个表单可以将一些文本与传单地图上的标记相关联：

<form action="map.php" method="POST">
 <section>
  <label>write some text here</label>
   <textarea id="text" rows="3" name="area"></textarea>
 </section>

 <input type="submit" value="show map" />
</form>

正如您在上面看到的，textarea 的内容被传递到页面 map.php，其中显示了一个地图。在地图上，会显示位置标记，并且弹出窗口包含通过 textarea（变量$text）发布的文本：

<?php
$text = htmlspecialchars($_POST["text"]);
?>

<center>
 <div id="map" class="embed-container"></div>
</center>

<script>
  var map = L.map('map').setView([46.13, 11.11], 9);
  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      maxZoom: 17,
      minZoom: 9
    }).addTo(map);
</script>
<script>
  var icon = L.icon({
        iconUrl: 'img/gps.png',
        iconSize: [25, 25],
        });
  var marker = L.marker(['<?=$latitude;?>', '<?=$longitude;?>'], {icon: icon}).addTo(map);
  marker.bindPopup('<?=$text;?>');
</script>

问题是，如果我在 textarea 中写入内容时按ENTER，则没有任何内容传递给弹出标记。我尝试过\n等，但没有任何效果。它们在弹出文本中显示为字符串，而不是换行符。

有任何想法吗？

Answer 1

问题是，如果我在 textarea 中写入内容时按ENTER，则没有任何内容传递给弹出标记。

这是不准确的。弹出窗口中的 HTML 正在接收换行符。

问题是换行符显示为折叠的空白。这是 HTML 中的默认设置。让我引用所有 HTML 元素默认继承的white-spaceCSS 属性的文档：

普通的

• 空白序列被折叠。源中的换行符作为其他空格处理。根据需要换行以填充行框。

HTML 折叠空白字符，包括制表符和换行符（但不包括 s）。

Leaflet 弹出窗口中的文本遵循相同的规则。替换为您的新行HTML<br>换行，或以其他方式包裹每一行的块级元素像<div>。

如果您使用的是php，最简单的方法是使用该nl2br函数。这不一定是最好的方法，因为它很容易让没有经验的开发人员进行 XSS 攻击。如果您要输出用引号括起来的 JavaScript 字符串，则使用htmlspecialchars将无济于事。对于这些情况，我建议使用json_encode提供引号和引号转义，即var foo = <?= json_encode(nl2br(str)); ?>;