Значение textarea для абзаца html только как текст

Может быть, тема действительно не объясняет мою проблему правильно. Я постараюсь объяснить это более точно здесь. Итак, у меня есть теги <textarea> и <p> aragraph. Если я ввожу текст в текстовую область, а затем после нажатия кнопки я вставляю значение текстовой области в абзац html. Если это текст, то все в порядке, но если это рукописный html-код, это неправильно, потому что я не хочу, чтобы браузер анализировал этот html-код. Вот простой пример с использованием jQuery:

$('.some_button').click(function () {
$('p').html($('textarea').val());
});

Итак, как я могу вставить html-код в виде текста в абзац? Заранее спасибо!


html jquery textarea
person faya    schedule 08.02.2010    source источник
comment
зачем использовать <p>, а не <pre>?   -  person Reigel    schedule 08.02.2010
comment
Я использую pre, это всего лишь пример, потому что pre не поможет по сравнению с html-кодом :)   -  person faya    schedule 08.02.2010

Ответы (3)


arrow_upward
3
arrow_downward

С помощью метода text.

person Quentin    schedule 08.02.2010
comment
Не совсем так — text() просто удаляет любой HTML и оставляет только текстовое содержимое. Если я правильно понимаю OP, он хочет увидеть фактический исходный код HTML. - person Pekka; 08.02.2010
comment
@Pekka - документация jQuery говорит об обратном: мы должны знать, что этот метод экранирует строку, предоставленную по мере необходимости, чтобы он правильно отображался в HTML. Для этого он вызывает метод DOM .createTextNode(), который заменяет специальные символы их эквивалентами в HTML (например, для ‹). - person Quentin; 08.02.2010

arrow_upward
4
arrow_downward

Вам нужно избежать HTML:

$('p').html($('textarea').val().replace(/</g,'&lt;').replace(/>/g,'&gt;'));

ИЗМЕНИТЬ: вместо этого используйте .text(), как уже упоминалось, если вы не хотите выполнять преобразование вручную.

person David Hellsing    schedule 08.02.2010
comment
Ничего себе, это долгий путь, и вы забыли преобразовать & в &amp; - person Quentin; 08.02.2010
comment
долго заводится? возможно, но это быстро и хорошо работает. преобразование не требуется для отображения тегов HTML. - person David Hellsing; 08.02.2010
comment
В HTML есть нечто большее, чем «теги». Просто подождите, пока данные не будут содержать строку &copy; — вместо этой строки вы увидите символ авторского права (так же, как и любой другой подлинный объект HTML). - person Quentin; 08.02.2010

arrow_upward
1
arrow_downward

Дэвид Дорвард уже ответил на это, и я бы добавил комментарий вместо ответа, но не был уверен, что код отобразится правильно, поэтому.. С этим

$('.some_button').click(function () {
  $('p').text($('textarea').val());
});

а также

<input type='button' class='some_button' value='click!'><br>
<textarea>foo&lt;br&gt;foo</textarea>
<p></p>

При нажатии на кнопку в абзаце отображается "foo‹br›foo". Это то, что вам нужно?

--Дополнение--

Хорошо.. Я только начинающий JavaScript, так что не уверен, насколько это плохо :-) Но следующее заменяет специальные символы их HTML-эквивалентами, а разрывы строк заменяется на ‹br›.

<script type="text/javascript">
String.prototype.htmlents = function() {
  var trans = {'&':'&amp;', '"':'&quot;', '\'':'&#039;', '<':'&lt;', '>':'&gt;'};
  var arr = this.split('');
  for (var i=0;i<arr.length;i++) {
    if (trans.hasOwnProperty(arr[i])) {
      arr[i] = trans[arr[i]];
    }
  }
  return arr.join('');
};

$(document).ready(function(){
  $('.some_button').click(function () {
    $('p').html($('textarea').val().htmlents().replace(/\n/g,'<br>\n'));
  });
});
</script>

Вспомнил, что мне приходилось делать что-то подобное раньше, и с того времени все еще лежал htmlents(). Не стесняйтесь критиковать :-)

person MSpreij    schedule 08.02.2010
comment
Элементы textarea определены как содержащие PCDATA, поэтому они должны быть &gt;br, а не <br. - person Quentin; 08.02.2010