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

Question

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

<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，其中显示了一张地图。在地图上，显示了地点标记，弹出窗口包含通过文本区域发布的文本（变量 $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>

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

有什么想法吗？

Answer 1

The problem is that if I press ENTER while I write something in the textarea, nothing is passed to the popup marker.

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

问题是换行符显示为折叠的空格。这是 HTML 中的默认设置。让我引用 documentation for the white-space CSS property，所有 HTML 元素默认继承：

normal

Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.

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

Leaflet 弹出窗口中的文本仅遵循相同的规则。 用 HTML <br> line breaks, or otherwise wrap every line in a block-level element 替换您的换行符，例如 <div>。

如果您使用 php, the easiest way is to use the nl2br function. This is not necessarily the best way, as it is very prone to allowing XSS attacks in the hands of inexperienced developers. Using htmlspecialchars will not help if you are outputting JavaScript strings, enclosed in quotes. For these cases I recommend using json_encode 提供引号和引号转义，即 var foo = <?= json_encode(nl2br(str)); ?>;

Answer 2

遇到问题 nl2br() 不工作而 json_encode(nl2br(str)) 工作，但它在字符串的开头和结尾添加了双引号 ("str") .我终于能够使用以下代码让它工作：

$string = str_replace("\r","",$string); 
$stringArray = explode("\n", $string);   
$string = implode("<br>", $stringArray);

我在removinb "\r" 后试了nl2br()，还是不行，就坏了...

$string = str_replace("\r","",$string);
$string = nl2br($string); // DID NOT WORK!!!

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

newline in Leaflet marker popup text

php

newline

leaflet