JQuery text() и новые строки

Я хочу сказать

$(someElem).text('this\n has\n newlines);

и он отображает с новыми символами в браузере. Единственное обходное решение, которое я нашел, - установить свойство css 'white-space' на 'pre' на someElem. Это почти работает, но тогда у меня есть досадно большое дополнение между текстом и вершиной некоторого символа, даже когда я устанавливаю дополнение на 0. Есть ли способ избавиться от этого?

ОТВЕТЫ

Ответ 1

Это 2015 год. Правильный ответ на этот вопрос на данный момент заключается в использовании пустого white-space: pre-line CSS white-space: pre-line или white-space: pre-wrap. Чистый и элегантный. Самая низкая версия IE, которая поддерживает пару - 8.

https://css-tricks.com/almanac/properties/w/whitespace/

PS Пока CSS3 не станет обычным, вам, вероятно, придется вручную обрезать начальные и/или конечные пробелы.

Ответ 2

Если вы сохраняете объект jQuery в переменной, вы можете сделать это:

var obj = $("#example").text('this\n has\n newlines');
obj.html(obj.html().replace(/\n/g,'<br/>'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

Ответ 3

Вот что я использую:

function htmlForTextWithEmbeddedNewlines(text) {
    var htmls = [];
    var lines = text.split(/\n/);
    // The temporary <div/> is to perform HTML entity encoding reliably.
    //
    // document.createElement() is *much* faster than jQuery('<div></div>')
    // http://stackoverflow.com/questions/268490/
    //
    // You don't need jQuery but then you need to struggle with browser
    // differences in innerText/textContent yourself
    var tmpDiv = jQuery(document.createElement('div'));
    for (var i = 0 ; i < lines.length ; i++) {
        htmls.push(tmpDiv.text(lines[i]).html());
    }
    return htmls.join("<br>");
}
jQuery('#div').html(htmlForTextWithEmbeddedNewlines("hello\nworld"));

Ответ 4

В качестве альтернативы попробуйте использовать .html, а затем оберните тегами <pre>:

$(someElem).html('this\n has\n newlines').wrap('<pre />');

Ответ 5

Вы можете использовать html вместо text и заменить каждое вхождение \n на <br>. Вам нужно будет правильно избежать вашего текста.

x = x.replace(/&/g, '&amp;')
     .replace(/>/g, '&gt;')
     .replace(/</g, '&lt;')
     .replace(/\n/g, '<br>');

Ответ 6

Я бы предложил работать с элементом someElem напрямую, поскольку замены с помощью .html() также заменили бы другие теги HTML внутри строки.

Вот моя функция:

function nl2br(el) {
  var lines = $(el).text().split(/\n/);
  $(el).empty();
  for (var i = 0 ; i < lines.length ; i++) {
    if (i > 0) $(el).append('<br>');
    $(el).append(document.createTextNode(lines[i]));
  }
  return el;
}

Позвонить по:

someElem = nl2br(someElem);

Ответ 7

Использование свойства белого пробела CSS, вероятно, является лучшим решением. Используйте Firebug или инструменты разработчика Chrome, чтобы определить источник дополнительного дополнения, которое вы видели.

Ответ 8

Попробуй это:

$(someElem).html('this<br> has<br> newlines);

Ответ 9

У меня есть исходный код Java, который я запрашиваю, используя ajax POST, и я хочу отобразить содержимое этого файла в виде блока кода на html, имеющего 2 features- 1. номер строки, за которым следует строка кода 2. выделение java По сути, я хочу увидеть, как будет выглядеть Java-код на возвышенном/затмении.

Мой ответ - массив строк исходного кода.