L'informatique pour les littéraires

Javascript renommer tous les éléments

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>