为什么jQuery的.text()不能识别\ n?

时间:2014-07-29 12:39:33

标签: javascript jquery html string formatting

我正在尝试在页面上打印html文本。 现在我正在做

$("#generate_html_button").click(function(){
    var generated_html_text = $("#visual_form").html();
    $("#generated_html_text").text(generated_html_text);//generated_html_text is just a <div> element
  });

如果我将generated_html_text打印到控制台,它将显示为

<div class="dropDown form-group ui-draggable ui-draggable-handle col-xs-12" id="0" style="display: block;">
          <div>
            <label>dropdown</label>
          </div>
          <div class="form-group">
            <select class="form-control">
              <option value="option1">Option 1</option>
              <option value="option2">Option 2</option>
            </select>
          </div>
        </div> 

控制台将使用正确的成型。当我使用.text()将文本打印到我的页面时,它会忽略\n并将其打印在一个长行中。

<div class="dropDown form-group ui-draggable ui-draggable-handle col-xs-12" id="0" style="display: block;"> <div> <label>dropdown</label> </div> <div class="form-group"> <select class="form-control"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </div> </div>

大多数建议使用.replace(),但是当我尝试使用generated_html_text = generated_html_text.replace(/\n/g, '<br/>');时,只会在没有格式化的情况下生成相同的结果,并且我试图避免使用<br>在我的输出中。我也尝试将.text()更改为.html(),但之后它只是渲染元素。为什么赢得了#text()识别现有的\n

2 个答案:

答案 0 :(得分:4)

要使空白显着,请尝试容器元素上的CSS white-space: pre-wrap

答案 1 :(得分:0)

来自http://php.net/manual/en/function.nl2br.php

<?php
echo nl2br("foo isn't\n bar");
?>

将输出:

foo isn't<br />
bar