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によって挿入されると言っているので、ユーザーがテキストを入力し、リンクをクリックすると、入力されたコンテンツが別の場所に表示されるテキストエリアのようなものを考えています。これにより、サンプルコードを使用して記述している静的スクリプトではなく、動的スクリプトが必要であると私は信じています。

動的スクリプトは、スクリプトでコンテンツを正しく定義する代わりに、テキストエリアからコンテンツを取得して処理します。

したがって、おそらくあなたはこのようなものをもっと探しています。新しいドキュメントにコピーして貼り付けるだけで試してみることができます。

更新ボタンをクリックするたびにコンテンツホルダーのコンテンツを置き換える場合。あなたが使用する必要があります

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

それ以外の

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

注意：.html（）関数を使用する場合

&lt;p&gt;

-tagのようなテキストに置き換えられる<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>

これがお役に立てば幸いです。読み直す時間がないので、間違いをお詫びしますが、あなたがやろうとしていることを理解していれば、実際のスクリプトが役に立ちます。

于 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 に答える