0

我在附加或附加文本时遇到问题，在段落之间自动放置换行符。例如：

<script>
    $(document).ready(function () {
        $('#somelink').click(function () {
            $('#somediv').append("<p>Here's my first paragraph blah blah blah</p>
    <p>Here's my second paragraph blah blah blah blah</p>
    <p>Oh here's a third paragraph blah blah</p>");
        });
    });
</script>

由于段落之间的换行，似乎不起作用。我发现如果<p>标签彼此相邻，那很好，例如：

<p>first paragraph</p><p>second paragraph</p>

而不是：

<p>first paragraph</p>
<p>second paragraph</p>

希望这是有道理的。问题是这些附加放置的文本是用户生成的。如果我正在更新文本内容，那很好，因为我知道要消除我输入的文本的换行符。但是，如果我的客户最终接管更新并使用 CMS 的内置文本编辑器说添加新段落，它将自动创建换行符并中断脚本。基本上，文本编辑器会自动格式化文本，就像上面不工作的例子一样。

有什么方法可以让函数删除这些换行符并让<p>标签彼此相邻运行？或者有没有一种方法可以保留带有标签的文本，不会破坏脚本？

4

3 回答 3

1

好的，对不起，如果我对这个答案不满意。

但是正如您所说的内容是由 cms 插入的，我正在考虑类似于文本区域的东西，用户在其中输入文本，单击链接，输入的内容应该显示在其他地方。这让我相信您需要一个动态脚本，而不是您使用示例代码编写的静态脚本。

动态脚本将从 textarea 获取内容并使用它，而不是在脚本中定义内容。

因此，也许您正在寻找更像这样的东西。您可以简单地复制粘贴到新文档中进行尝试。

如果您想在每次单击更新按钮时替换 contentholder 中的内容。你应该使用

$("#contentholder").html(inputData)

代替

$("#contentholder").append(inputData)

注意：如果你使用 .html() 函数

&lt;p&gt;

将被看起来像<p>-tag 的文本替换，因此您可能需要先清理输入，具体取决于您要实现的目标。

<html>
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type='text/javascript'>

        $(document).ready(function(){

            $("#update").on('click', function(){
                //take content from textare
                var inputData = $("#input").val();
                $("#contentholder").append(inputData);
            });


        })

    </script>
</head>
<body>
<!-- say this is the so called text editor -->
<textarea id='input' cols='50' rows='5'>
    &lt;p&gt;This is some sample text&lt;p&gt;

    &lt;p&gt;followed by some other text that was split by a linebreak and each text was wrapped in a p-element
</textarea>
<!-- submit the texteditor text -->
<button id='update'>click me to update</button>

<!-- put the text in a new something -->
<div id='contentholder'>
</div>
</body>
</html>

希望这会有所帮助，必须去，没有时间重读，对任何错误深表歉意，但如果我理解你想要做什么，实际的脚本应该可以帮助你

于 2013-02-13T20:11:14.197 回答
1

Javascript 不支持您尝试的多行字符串。您必须使用+运算符或将所有文本行放入数组中，如下所示：

$('#somediv').append(
  [
    "<p>Here's my first paragraph blah blah blah</p>",
    "<p>Here's my second paragraph blah blah blah blah</p>",
    "<p>Oh here's a third paragraph blah blah</p>"
  ].join('')
);

或与+运营商：

$('#somediv').append(
    "<p>Here's my first paragraph blah blah blah</p>" +
    "<p>Here's my second paragraph blah blah blah blah</p>" +
    "<p>Oh here's a third paragraph blah blah</p>"
);
于 2013-02-13T16:48:49.637 回答
0

尝试这个...

<script>
    $(document).ready(function () {
        $('#somelink').click(function () {
            $('#somediv').append("<p>Here's my first paragraph blah blah blah</p>\
                <p>Here's my second paragraph blah blah blah blah</p>\
                <p>Oh here's a third paragraph blah blah</p>");
        });
    });
</script>

您可以通过使用 \ 转义换行符来继续下一行的字符串

于 2013-02-13T16:51:56.040 回答