Question

我在附加或添加文本时出现问题，并在段落之间自动放置行返回。例如：

<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>标签紧挨着彼此运行？或者有没有办法保留文本进入原样，标签，不会破坏脚本？

Answer 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>"
);

Answer 2

试试这个......

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

您可以通过使用\

转义换行符来继续下一行的字符串

Answer 3

哦，对不起，如果我对此答案不感兴趣。

但正如你所说的内容是由cms插入的，我正在考虑像用户放入文本的textarea，点击链接，输入的内容应显示在其他地方。这让我相信您需要一个动态脚本，而不是静态脚本，因为您正在编写示例代码。

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

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

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

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

而不是

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

抬头：如果你使用.html（）函数

&lt;p&gt;

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

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

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

试图追加/前置多个段落？

3 个答案: