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

Question

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

我已附上错误图片。

<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>