replaceWith переменная

Question

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

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

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

Пример HTML:

input: <input type="text" id="input"/><br /> 
plain output: <div id="outputplain"></div><br /> 
replaced output: <div id="outputreplaced"></div><br /> 

Пример JS:

// simulate user input 
$('#input').val('<a href="http://stackoverflow.com">me</a> and <a href="http://stackexchange.com">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, любое решение, которое позволяет мне лишать теги из переменной, приветствуется.

Answer 1

Вы можете использовать временный JQuery объект (DOM), как

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

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

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="button" id="input" /> 
 
<div id="outputplain"></div> 
 
<div id="outputreplaced"></div>

Кроме того, как вы можете видеть, что есть метод, называемый .unwrap(), который поможет вам взять элемент из его parent