11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] InnerHTML

Bonjour à tous
Je récupère une chaîne de caractères "aaa toto titi tata" provenant d'un fichier xml avec une balise xml
<text>aaa [i]toto[/i] titi [b]tata[/b]</texte>

le but est d'obtenir une balise html
<p>aaa <i>toto</i> titi <b>tata</b>


J'écris le script suivant

const textNode = document.createElement('p');
let text = "aaa [i]toto[/i] titi [b]tata[/b]";
text = text.replace(/\n/g, '<br>');
text = text.replace(/]/g, '>');
text= text.replace(/\[/g, '<');
textNode.innerHTML = text;
const CONTAINER = document.getElementById('container');
CONTAINER.appendChild(textNode);


upload/1747996554-48769-innerhtml.png
si je regarde le code résultat avec les outils de debugging de FireFox j'obtiens

<p>aaa <i>toto<i> titi <b>tata&lt;?&gt;</b></i></i></p>

le ? étant le caractère backspace 0008

Quelqu'un peut-il m'aider à corriger ce script ?
Merci de votre aide
Modifié par PapyJP (23 May 2025 - 12:48)
Bonjour,

J'ai essayé votre code et ca fonctionne bien sur mon fireFox :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{padding: 20px;}
        p{background-color: yellow}
    </style>
</head>
<body>
    
    <div id="container">

    </div>


<script>

    // xml : <text>aaa [i]toto[/i] titi [b]tata[/b]</texte>
    // objectif : <p>aaa <i>toto</i> titi <b>tata</b>

    const textNode = document.createElement('p');
    
    let text = "aaa [i]toto[/i] titi [b]tata[/b]";
    
    text = text.replace(/\n/g, '<br>');
    text = text.replace(/]/g, '>');
    text= text.replace(/\[/g, '<');

    console.log(text);
    // aaa <i>toto</i> titi <b>tata</b>

     textNode.innerHTML = text;

    const container = document.getElementById('container');
    container.appendChild(textNode);
</script>

</body>
</html>



<p> n'est pas visible mais est bien dans le DOM car le background est bien jaune.
Modifié par alain_47 (23 May 2025 - 14:17)
Modérateur
Bonjour,

Sur le site, il y a dans la variable test des backslash i et backslash b au lieu de slash i et slash b.

Amicalement,
Modifié par parsimonhi (23 May 2025 - 14:34)
Merci beaucoup
J'avais corrigé dans l'éditeur de code, mais la sauvegarde du fichier sur le site ne s'était bas bien passée...
Le genre de c... qu'on ne voit pas quand elles arrivent.
Prévenir un modérateur
Répondre au sujet
Aller à