Il arrive parfois que l’on souhaite renommer tous les éléments d’un fragment de xml ou de html. La difficulté apparaît lorsqu’il s’agit de retrouver les balises fermantes correspondantes aux balises ouvrantes que l’on veut renommer, ou supprimer.
Voici un script qui affiche permet de sélectionner un fichier (par exemple xml) et de l’afficher dans la première case de texte. La seconde case sert à afficher le résultat de la modification.
Attention, dans Firefox, le cache reste en place, ce qui peut occasionner des erreurs d’interprétation.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script>
function loadFileToElement()
{
var selectedFile = document.getElementById('input').files[0];
var reader = new FileReader();
reader.onload = function(e) {
readXml=e.target.result;
//console.log(readXml);
var parser = new DOMParser();
var doc = parser.parseFromString(readXml, "application/xml");
//console.log(doc);
document.getElementById('source').value = readXml;
let els = doc.querySelectorAll('*');
var counter = 0;
els.forEach(function(element) {
console.log(element.tagName);
element.classList.add(element.tagName);
if (element.getElementsByTagName("*").length>0){
var new_element = doc.createElement('div');
}else{
var new_element = doc.createElement('p');
}
var old_attributes = element.attributes;
var new_attributes = new_element.attributes;
// copy attributes
for(var i = 0, len = old_attributes.length; i < len; i++) {
new_attributes.setNamedItem(old_attributes.item(i).cloneNode());
}
// copy child nodes
do {
new_element.appendChild(element.firstChild);
}
while(element.firstChild);
// replace element
element.parentNode.replaceChild(new_element, element);
counter++;
});
console.log(counter);
document.getElementById('dest').value = (new XMLSerializer()).serializeToString(doc);
}
reader.readAsText(selectedFile);
}
</script>
</head>
<body onload="loadFileToElement('Romeo_and_Juliet.xml', 'source');">
<form>
<input type="file" id="input"/>
<textarea id="source"></textarea>
<textarea id="dest"></textarea>
<input type="button" onclick="loadFileToElement()" value="load"/>
</form>
</body>
</html>