模态显示<br/>下一行的瞬间

Question

有一个while循环来显示数据库中的所有数据，每个div上都有一个按钮。当用户单击该按钮时，该特定信息将以模态显示。实际上它的工作正常，但有一个小bug。使用“textarea”添加到数据库的描述。所以它包含几个从下一行开始的段落。 在模态中显示数据时没有下一行。在模式中，它显示为“＆lt; br＆gt;”下一行的瞬间。我想在用户单击模式时在新行中显示文本。请帮我修理一下。

我附上了错误图片。

<li>
   <div class="media wow fadeInDown articleclick" data-title="<?php echo $row2['title']; ?>" data-description="<?php echo nl2br($row2['article']); ?>" data-html="true" data-img="img/<?php if($row2['image']==''){ echo ''; } else { echo $row2['image']; } ?>" data-toggle="modal" data-target="#myModal" >
   <a href="#" class="media-left">
      <img alt="img" class="img-responsive" src="img/<?php if($row2['image']==''){ echo './noarticle.gif'; } else { echo $row2['image']; } ?>" style="height: 85%;">
   </a>
   <div class="media-body">
      <h4 class="media-heading"><a href="#"><?php echo $row2['title'];?></a></h4> 
   </div>
   </div>
</li>

<script>
 $(document).on("click", '.articleclick', function (e) {
   var description = $(this).data('description');
   var title = $(this).data('title');
   var img = $(this).data('img');
   $(".descrpdisplay").text(description);
   $(".titledisplay").text(title);
   $('.imgdisplay').attr('src', img);
 });
</script>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">Articles</h4>
    </div>
    <div class="modal-body">
      <img src="" class="img-responsive imgdisplay">
      <b><div class="titledisplay" style="padding: 25px 0px 10px 0px;"></div></b>
      <div class="descrpdisplay" ></div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div>
    </div>
  </div>
</div>

Answer 1

您尝试解决什么问题？当您将日期解析为DB时，将\r\n替换为其他内容是一个问题。例如：

$text= $_POST["textarea"];
str_replace("\r\n"," ", $text);

当你试图在页面上显示它时 - 你可以在PHP端解决同样的问题。

否则，您应该先准备好文本，然后再将其发送到JS或者重新渲染，然后再将其放在HTML上。

str = str.replace(/(?:\r\n|\r|\n)/g, '</p><p>');

在这两种情况下，您都知道任何文字都应以<p>开头，并以</p>结尾。如果换行符为\r\n，则应将其转为</p><p>

当然，你会收到关于双重换行符的额外段落，并且应该在页面显示之前或之后预防。决定“正确的一面”，我们将为您扩展解决方案。

UPD（一些想法）：

$(document).ready(function() {

  var textArea = $('textarea').text();
  console.log(textArea);

  $('.textBefore').text(textArea);
  
  var textAfter = ''
  + '<p>'
  +    textArea.replace(/(?:\r\n|\r|\n|<br \/>|<br>)/g, '</p><p>')
  + '</p>';

  textAfter = textAfter.replace(/<p><\/p>/g, '');
  
  $('.textAfter').html(textAfter);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea>
  Some 
  text 
  example
</textarea>
<div class="textBefore"></div>
<div class="textAfter"></div>