js заменяет n на и показывает

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть текстовое поле для ввода и show-div для отображения ввода:

 <textarea id="inputtext" style="height:100px"></textarea>

<button id="show">show in div</button>

<div id="showtext">

</div>

и мой js:

 $(function(){
 $('#show').on('click',function(){
    var text = $.trim($('#inputtext').val());
    text = text.replace(/r?n/g, "<br />").replace(/<brs*[/]?>/gi, "n");
    $('#showtext').text(text);
 });
});

Я хочу, чтобы, если вы дадите:
a
b
c

он также должен отображаться в этой форме. но он показывает сейчас: a b c .

вот моя скрипка: http://jsfiddle.net/5gkak /

что я делаю не так?

1. Вы заменяете все разрывы строк <br /> на, а затем сразу же заменяете все <br /> обратно на разрывы строк, что немного сбивает с толку.

2. Я в замешательстве. Что вы на самом деле заменяете на что?

3. В любом случае, вас может заинтересовать решение только для CSS. jsfiddle.net/5gkak/2

4. @Juhana Это классное решение, но зачем вообще нужен css? jsfiddle.net/5gkak/3

5. @edhedges Потому pre что не делает то же самое. jsfiddle.net/5gkak/4

Ответ №1:

Вам нужно изменить свою скрипку, чтобы соответствовать этому: http://jsfiddle.net/5gkak/1 /

 $(function(){
    $('#show').on('click',function(){
        var text = $.trim($('#inputtext').val());
        text = text.replace(/r?n/g, "<br />");
        $('#showtext').html(text);
    });
});

То, что у вас было, заменяло на n , <br /> а затем делало то же самое в обратном порядке, поэтому <br /> заменялось на n . Также вам нужно было установить html #showtext . Проверьте разницу .text и .html в документах jQuery.

Существуют и другие варианты (они взяты из разделов комментариев к вопросу):

Только для CSS (для форматирования): http://jsfiddle.net/5gkak/2 / (это самое крутое решение, ИМО)
Только для Html (для форматирования): http://jsfiddle.net/5gkak/3 / (это работает не для всего текста!)