0 2.5K ru

Textarea new line to html newline

Categories: 💻 Programming

Существует распространенная проблема после ввода текста из textarea отображая его потом в html, Те переносы строк которые были в textarea не работают в html странице, мы предлагаем вам 3 способа как решить этот вопрос:

  • Первый способ, через C# можно написать функцию для конвертации переносов в html тэг <br>

public static string GetHtmlString(string value)
        {
            if (string.IsNullOrWhiteSpace(value))
            {
                return "";
            }
            var result = value.Replace("\n", "<br/>");
            return result;
        }
var str = GetHtmlString(myTextAreaValue)


И далее полученую строку можно отобразить в Razor через 

@Html.Raw(str)
  •  Второй способ: через javascript, используя функцию replace и регулярные выражения можно заменить переносты строк на html тэг <br />

var htmlString = value.replace(/(?:\r\n|\r|\n)/g, '<br />');

 где value значение из <textarea>

  • Третий способ:через свойство css 

white-space: pre-line;

​пример:

<p style="white-space: pre-line;">from textarea text</p>

Какой из вариантов выбрать, решать вам, но стоить отметить что 3 вариант исключает то что юзер встроит какой то html код в ваш textarea, потому что в первых 2х вариантах юзер может вставить html, img и тд, и вам придется предусматривать валидацию которая будет отсекать это.

Comments:

Please log in to be able add comments.