ReplaceWith в переменной

У меня есть поле ввода, где пользователям разрешено вводить текст, включая ссылки. То, что я хотел бы сделать, - это использовать это значение как отображаемое как html, так и обычный текст, только отображаемое содержимое каждого тега .

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

$("a").replaceWith(function() { return $(this).contents(); }).val();

Пример html:

input: 
plain output: 
replaced output:

Пример JS:

// simulate user input
$('#input').val('<a href="http://stackoverflow.com" target="_blank">me</a> and <a href="http://stackexchange.com" target="_blank">you</a>');

// try to render
$('#input').click(function() {
 var input = $(this).val();

 // html rendered
 $('#outputplain').html(input);

 // plain rendered
 $('#outputreplaced').html(input);
 $("#outputreplaced a").replaceWith(function() { return $(this).contents(); });
});

Вышеприведенный пример работает, но то, что я действительно хотел бы сделать, это сохранить outputplain и outputreplaced как переменные, чтобы потом отправить их в шаблон. Однако я не могу понять, как сделать замену без вывода на страницу.

Я не ограничиваюсь использованием replaceWith, любое решение, которое позволяет мне лишать теги из переменной, приветствуется.

1 ответ

Вы можете использовать объект temp jQuery (dom), например

// simulate user input
$('#input').val('<a href="http://stackoverflow.com" target="_blank">me</a> and <a href="http://stackexchange.com" target="_blank">you</a>');

// try to render
$('#input').click(function() {
 var input = $(this).val();

 // html rendered
 $('#outputplain').text(input);

 var $tmp = $('<div><code>', {
 html: input
 });
 $tmp.find('a').contents().unwrap();

 var replaced = $tmp.html();
 // plain rendered
 $('#outputreplaced').text(replaced);
});</code> </div>

licensed under cc by-sa 3.0 with attribution.