HTML-Variable umkreisen und Spannen mit Inhalt ersetzen

Question

Ich habe eine Variable, die HTML enthält.

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>'; 

Ich versuche, um alle Elemente zu loopen und durch spannen bestimmtes Datum zu ersetzen. Daher müssen alle Spannweiten mit einer Klasse von variable-source durch ein bestimmtes Datum und dasselbe für input-source ersetzt werden.

Ich habe versucht, die folgenden zu verwenden:

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

, die die folgenden Ausgänge:

testing This is a variable 

Alle der Absatz-Tags entfernt wurden, und es scheint, nach dem ersten Absatz zu stoppen. Gibt es etwas, das mir hier fehlt? Ich kann mehr Code posten oder mehr erklären, wenn nötig.

Vielen Dank im Voraus.

Answer 1

Sie müssen einen HTML-Objektverweis erstellen, sonst erhalten Sie keinen Verweis auf den aktualisierten Inhalt. Dann erhält die Aktualisierung von Inhalten aus dem Objekt erstellt jQuery nach Operationen

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>