Петля вокруг переменной HTML и замещает пробелы с содержимым

Question

У меня есть переменная, содержащая HTML.

var html = '<p><span id="variable:7" class="variable-source" title="variable:TEXT_CONTAINER">DATA</span> This is a variable</p>'+ 
'<p><span id="input:10.New Input 2" class="input-source" title="New Screen; New Input 2">DATA</span> This is a input source</p>'+ 
'<p>Testing</p>'; 

Я пытаюсь обойти все элементы и заменить на конкретные даты. Таким образом, любые промежутки с классом variable-source необходимо будет заменить на определенную дату, и то же самое для input-source.

Я попытался использовать следующее:

$('span', html).replaceWith(function() { 
    var id = $(this).attr('id'); 
    // this returns the correct id 
    //calculations go here 
    var value = 'testing'; 
    return value 
}); 

которая выводит следующее:

testing This is a variable 

Все тегов абзаца были удалены, и, кажется, останавливается после первого абзаца. Есть что-то, чего я здесь не хватает? При необходимости я могу опубликовать больше кода или объяснить больше.

Заранее спасибо.

Answer 1

Вам нужно создать ссылку на объект html, иначе вы не получите ссылку на обновленный контент. Затем получить содержимое обновлений из созданного объекта JQuery после выполнения операции замены

var html = '<p><span id="variable:7" class="variable-source" title="variable:TEXT_CONTAINER">DATA</span> This is a variable</p>' + 
 
    '<p><span id="input:10.New Input 2" class="input-source" title="New Screen; New Input 2">DATA</span> This is a input source</p>' + 
 
    '<p>Testing</p>'; 
 

 
var $html = $('<div></div>', { 
 
    html: html 
 
}); 
 

 
$html.find('span.variable-source').replaceWith(function() { 
 
    var id = this.id; 
 
    // this returns the correct id 
 
    //calculations go here 
 
    var value = 'replaced variable for: ' + id; 
 
    return value 
 
}); 
 
$html.find('span.input-source').replaceWith(function() { 
 
    var id = this.id; 
 
    // this returns the correct id 
 
    //calculations go here 
 
    var value = 'replaced input for: ' + id; 
 
    return value 
 
}); 
 

 
var result = $html.html(); 
 
$('#result').text(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="result"></div>