Обработка ввода с HTML внутри его значения (используя jQuery)

Question

Я создал небольшую функцию, похожую на плагин для редактирования на месте.

Что он делает:

• получает html-содержимое элемента по клику: var editable = $(this).html();

• создает поле ввода текста (или получает его, если оно существует):

  var input = ($('input', this).length > 0) ? $('input', this) : $('<input type="text" value="' + editable + '" />'),
  

• заменяет текст элемента на ввод: $(this).empty().append(input);

Это работает, но только если редактируемый текст не содержит некодированных символов HTML.

Если в нем есть символы HTML, такие как < >, на втором этапе они преобразуются в код HTML и портят элемент ввода ...

Я пытался избежать их, используя:

editable = $('<div/>').text($(this).html()).html()

но затем я получаю текстовый ввод с экранированным HTML lol:)

Что я могу сделать?

Answer 1

Вы можете экранировать HTML-строку, чтобы она могла быть включена в значение атрибута HTML, например:

var escaped = string.replace(/</g, '&lt;').replace(/'/g, '&#39;').replace(/"/g, '&#34;');