Как сохранить разрывы строк при использовании метода .text() для jQuery?

ProgramBox

Как сохранить разрывы строк при использовании метода .text() для jQuery?

Post author:admin
Запись опубликована:27 октября, 2022
Post category:Вопросы по программированию

#javascript #node.js #electron #fs

#javascript #jquery #HTML #css

Вопрос:

Я пытаюсь добиться эффекта машинописи, и мой контент состоит из множества HTML-объектов. Проблема с использованием .html() заключается в том, что, поскольку он записывает каждую букву за раз, он будет печатать amp; then l then t then ; и, наконец, изменится на < .

HTML

 <p id="src">
amp;<!DOCTYPE htmlamp;>
amp;<!--[if lt IE 7]amp;>      amp;<html class=amp;quot;no-js lt-ie9 lt-ie8 lt-ie7amp;quot;amp;> amp;<![endif]--amp;>
amp;<!--[if IE 7]amp;>         amp;<html class=amp;quot;no-js lt-ie9 lt-ie8amp;quot;amp;> amp;<![endif]--amp;>
amp;<!--[if IE 8]amp;>         amp;<html class=amp;quot;no-js lt-ie9amp;quot;amp;> amp;<![endif]--amp;>
amp;<!--[if lt IE 9]amp;>      amp;<html class=amp;quot;no-js lt-ie9amp;quot;amp;> amp;<![endif]--amp;>
</p>
<p id="typed-paragraph">
    <span id="target"></span>
    <span id="typed-cursor">|</span>
</p>

CSS

 #src {
    display: none;
}

jQuery

 (function(){
    var srcText = $("#src").html();
        i = 0;
        result = srcText[i];
    setInterval(function() {
        if(i == srcText.length-1) {
            clearInterval(this);
            return;
        };
        i  ;
        result  = srcText[i].replace("n", "<br />");
        $("#target").html(result);
    }, 150); // the period between every character and next one, in milliseonds.
})();

Вы можете увидеть пример этого здесь
http://jsfiddle.net/j9KF5/9 /

Но если я использую .text(), я теряю все разрывы строк.

В конечном счете, как я могу решить проблему с сущностями или проблему с разрывом строки?

1. Попробуйте использовать функцию javascript unescape() для HTML-кода, который вы пытаетесь отобразить на лету, таким образом, чтобы ваши коды символов html были заменены соответствующими тегами перед началом его печати.

2. @DhanasekarSM это действительно не помогает.

3.Пожалуйста, включите полный пример в сам вопрос, а не просто ссылку. «Чтобы было ясно, ссылки на jsfiddle и подобные сервисы в порядке, но вопрос или ответ должны стоять сами по себе. Другими словами, в любой пост должно быть включено достаточно информации, чтобы он был полезен будущим посетителям, даже если все ссылки будут разорваны.» meta.stackexchange.com/a/151616/133242

4. Черт возьми, мне нравится этот подход «многострочной строки»: jsfiddle.net/j9KF5/13

Ответ №1:

Вам не нужно беспокоиться ни о HTML-объектах, ни о какой-либо сложной замене строк.

Все, что вам нужно, это немного CSS:

 #target {
    white-space: pre;
}

и используйте .text() подход:

 (function(){
    var srcText = $("#src").text().trim();
        i = 0;
        result = srcText[i];
    setInterval(function() {
        if(i == srcText.length-1) {
            clearInterval(this);
            return;
        };
        i  ;
        result  = srcText[i];
        $("#target").text(result);

    }, 150); // the period between every character and next one, in milliseonds.
})();

http://jsfiddle.net/mattball/vsb9F/

1. Это то, что .text() делает.

2. Нет… Я уже сказал, это .text() , ничего больше. Возможно, прочитать некоторые документы?

3. Так просто! .text() просто выводит текст, .trim() удаляет пробелы вокруг текста, а свойство пробелов css переносит текст при разрыве строки. ВАУ, и я думал об использовании свойства пробела, но на #src, а не #target (GAH) . Спасибо!

4. Вы спасли мой день! Спасибо!

5. Другой альтернативой является whitespace: pre-wrap то, что позволяет избежать длинных строк, делающих поле шире

Ответ №2:

Для всех, кто ищет, что на самом деле задает заголовок вопроса (вот как я попал на эту страницу: «как сохранить разрывы строк при использовании метода text() jQuery»), вы можете использовать что-то вроде этого:

 (function($){
   $.fn.innerText = function(msg) {
         if (msg) {
            if (document.body.innerText) {
               for (var i in this) {
                  this[i].innerText = msg;
               }
            } else {
               for (var i in this) {
                  this[i].innerHTML.replace(/amp;amp;<bramp;amp;>/gi,"n").replace(/(amp;amp;<([^amp;amp;>] )amp;amp;>)/gi, "");
               }
            }
            return this;
         } else {
            if (document.body.innerText) {
               return this[0].innerText;
            } else {
               return this[0].innerHTML.replace(/amp;amp;<bramp;amp;>/gi,"n").replace(/(amp;amp;<([^amp;amp;>] )amp;amp;>)/gi, "");
            }
         }
   };
})(jQuery);

Теперь вызовите $(‘.some-class’).innerText(), чтобы сохранить текст с сохранением разрывов строк.

1. Хороший, но принятый ответ также работает =] Я не знаю, как получается, что white-space: pre; правило CSS действительно влияет на то, как jQuery получает его text() , но оно работает.

Ответ №3:

Почему бы не использовать .replace для srcText переменной.

 srcText = srcText.replace(/amp;</g, "<"); //performs this with global modifier to cover whole string

Размещение серии .replace вызовов внутри функции, при этом каждый вызов изменяется на другой символ, приведет к очистке всей строки перед ее выводом на экран.

1. А как насчет всех других HTML-объектов или подобных экранирований amp;#9731; ? Это не жизнеспособное общее решение.

2. согласен, хотя в рамках этого конкретного вопроса требуется заменить только три типа символов.

Ответ №4:

Я бы рекомендовал использовать .innerText , а не реализовывать сложный цикл в других ответах, поскольку это экономит вам гораздо больше времени. Для этого просто выполните $(selector)[0].innerText .

Вот демонстрация. Начните вводить ввод. Обязательно добавьте новые строки и посмотрите, как innerText они сохраняются!

 var jquerytext = $('.jQuerytext');
var innerText = $('.innerText');
$('.text').on('input', function(){
  jquerytext.text($(this).text());
  innerText[0].innerText=($(this)[0].innerText);
})

 pre{
  display:inline;
}
.text{
  border:2px solid black;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text" contenteditable="true" spellcheck="false">Hello World!
Begin typing in here, and make sure to press Enter to make new lines!
</div>
<h2>jQuery <pre>.text()</pre></h2>
<div class="jQuerytext">
Begin typing in here, and make sure to press Enter to make new lines!
</div>
<h2>Vanilla <pre>.innerText</pre></h2>
<div class="innerText">
Begin typing in here, and make sure to press Enter to make new lines!
</div>

Развернуть фрагмент