【问题标题】:Jquery post not keeping line breaksJquery post不保留换行符
【发布时间】:2012-12-06 19:58:51
【问题描述】:

我有这个 javascript 可以发布来自各种 div 的数据,但我似乎无法让它保留换行符。

我认为这与我在找到的内容上使用 .text() 的事实有关,这可能根本不保留换行符。我尝试使用 .html() ,但由于某种原因,这会使所有写在新行上的文本嵌入到 div 中。

代码如下:

<script type="text/javascript">

$(document).ready(function() {

    $("#actor_result").load('xml/actortoxml.php?owner=<?php echo $_SESSION['username'] . "&id=" . $_GET['id']; ?>');
    $('#save_editable').click(function() {
        var name = $(document).find('#actorname').text();
        var current = $(document).find('#currenthealth').text();
        var max = $(document).find('#maxhealth').text();
        var effects = $(document).find('#actoreffects').text();
        var notes = $(document).find('#actornotes').text();

        $.ajax({
            url: 'actor_profile.php',
            type: 'POST',
            data: {
                update: 'true',
                actorid: <?php echo $_GET['id']; ?>,
                actorname: name, currenthealth: current, maxhealth: max, actoreffects: effects, actornotes: notes
            },
            success : function() {
            // gets called when ajax request completes successfully
            $("#actor_result").hide().load('xml/actortoxml.php?owner=<?php echo $_SESSION['username'] . "&id=" . $_GET['id']; ?>').fadeIn(500);     
            },
            error : function(err) {
                // in case of error
                console.log(err);
                alert('error');
            }
        });
    });
});
</script>

编辑,这是从 xml 文件生成的 html:

<div id="actor_result" style="display: block;">
    <!--?xml version="1.0"?-->

    <div class="row-fluid row span6 offset3">
        <div class="media well well-small">
            <a class="pull-left" href="#"><img class=
            "media-object img-circle circle128" src=
            "images/avatar/actor/Davius.png"></a>

            <div class="media-body page-header actor-profile">
                <div class="editable_name" contenteditable="true" id=
                "actorname">
                    <h4 class="media-heading">Davius</h4>
                </div><small><strong>awarnhag's minion</strong></small>
            </div><strong>Health:</strong>

            <div class="div_inline editable_hp" contenteditable="true" id=
            "currenthealth">
                17
            </div>/

            <div class="div_inline editable_hp" contenteditable="true" id=
            "maxhealth">
                20
            </div>hp
        </div>

        <h5><span class="label">Effects</span></h5>

        <div class="editable well well-small" contenteditable="true" id=
        "actoreffects">
            Mumblecore bushwick sed, nulla street art dolore delectus wolf
            american apparel artisan sriracha. Laboris seitan hoodie,
            freegan brooklyn letterpress adipisicing chambray mixtape id
            tofu organic butcher small batch. Art party carles readymade
            messenger bag williamsburg. Irony placeat sustainable, high
            life cillum yr sed vinyl pork belly messenger bag williamsburg
            VHS. Occaecat lo-fi readymade gluten-free 3 wolf moon. Ad tofu
            twee, blog nulla mumblecore gentrify brooklyn odio cliche
            selvage put a bird on it pork belly chillwave deserunt. Ea
            assumenda chillwave, keytar velit tumblr pour-over enim VHS
            mcsweeney's blog.aaaa
        </div>

        <h5><span class="label">Notes</span></h5>

        <div class="editable well well-small" contenteditable="true" id=
        "actornotes"></div>
    </div>
</div>

【问题讨论】:

  • 愚蠢的想法,但也许可以试试 CSS:* { white-space: pre } per stackoverflow.com/a/656648/483371
  • xml由xsl转成html。
  • 空白无效。我认为这与 javacript 通过 .text() 删除它们有关
  • 实际上,CSS 是有帮助的。结合用 BR:s 替换,在我应用空白之前,替换没有效果:pre on it =D

标签: jquery post line-breaks


【解决方案1】:

可以获取innerHTML,手动替换所有的div和brs;

$("#id").html()
        .replace(/<(br|p|div)[^>]*>/g, "\n")
        .replace(/<\/?\w+[^>]*>/g, "");

http://jsfiddle.net/tarabyte/GsECc/4/

【讨论】:

  • 这正是我想要的,非常感谢! =D
  • 然而,这似乎不是一个完美的解决方案。我只是尝试将段落的一部分向下推几行,保存后什么也没做,而是回到我编辑之前的状态。
  • 我添加了更通用的搜索模式版本。
【解决方案2】:

从上面的 sn-p 很难确定到底发生了什么。

您是否尝试在发送 (POST) 数据之前或收到数据之后将
-标签转换为“\n”,反之亦然数据($.load)? “#actor_result”是什么标签类型(div、textarea、input等)?

【讨论】:

  • 我对 javascript 不是很熟悉,所以很难在没有帮助的情况下尝试新方法嘿嘿。 #actor_result 只是一个 div,其中放置了 xsl 转换为 html 的 xml。例如,#actornotes 是 id 为“actor_result”的 div 内的可编辑 div。
猜你喜欢
  • 2020-08-04
  • 1970-01-01
  • 2011-01-19
  • 1970-01-01
  • 1970-01-01
  • 2016-02-14
  • 2020-05-01
  • 2013-03-15
  • 1970-01-01
相关资源
最近更新 更多