试图附加/前置多个段落？答案

【问题标题】：Trying to append/prepend multiple paragraphs?试图附加/前置多个段落？
【发布时间】：2013-02-13 16:43:12
【问题描述】：

我在添加或预先添加文本时遇到问题，其中自动在段落之间放置了换行符。例如：

<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>first paragraph</p><p>second paragraph</p>

而不是：

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

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

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

【问题讨论】：

为什么不直接构建一个没有换行符的字符串然后追加呢？
基本的 JavaScript 语法。在字符串声明中换行会破坏 javascript。
@Rusty 我会，但是进入脚本的文本最终可能不是我输入的，而是由 CMS 中的文本编辑器生成的，它会自动添加段落标签和换行符。跨度>

标签： jquery

【解决方案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>"
);

【讨论】：

嗨 luk3thomas 我可以让脚本添加“，”（如果它是一个数组）或添加 + 运算符吗？如果有，怎么做？
不，你必须像我的例子一样指定它。
唯一的问题是文本将由我正在使用的 CMS 中的内置文本编辑器生成。它只会渲染 标签中的段落。我想我必须以不同的方式来处理这种特定情况。

【解决方案2】：

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

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

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

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

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

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

而不是

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

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

&lt;p&gt;

将替换为看起来像 -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>

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

【讨论】：

真的很接近！唯一的问题是文本结束的地方和输入的地方在某种意义上是两个不同的地方。好吧，我在 CMS 管理器的文本编辑器中输入类型并创建一个新的文本资源，然后我可以在不同的地方调用该资源。所以如果它可能是var inputData = $("#input").val(); 并且#input 是资源调用代码，那就是它。
基本上文本输入和文本输出不会发生在同一页面上。输入发生在幕后，然后出现在我需要的任何地方。问题是，它是用段落标签和中断生成的，因为这正是 CMS 输出使用内置文本编辑器制作的文本的方式。

【解决方案3】：

试试这个...

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

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

【讨论】：

有没有办法让脚本在每个新段落中添加“\”？这是一个很好的解决方案，如果只放置一个段落，就像我有：$('#somediv').append("user entered paragraph here\"); 但如果输入了两个段落，例如，它最终会是：$('#somediv').append("user entered paragraph here\ second paragraph entered by user"); 其中“\”放在第一个很好，但是不是第二个。如果这是有道理的。
脚本需要\，所以不能添加。这是一种说“此字符串值在下一行继续”的方式，而不使用“
paragragh1
”+“
paragragh2
”+“
paragragh3
”等等。