Javascript - Supprimer contenu entre deux balises HTML

Résolu/Fermé

sipherion Messages postés 1798 Date d'inscription lundi 22 octobre 2007 Statut Membre Dernière intervention 19 décembre 2016 - 21 oct. 2013 à 10:04
sipherion Messages postés 1798 Date d'inscription lundi 22 octobre 2007 Statut Membre Dernière intervention 19 décembre 2016 - 21 oct. 2013 à 13:30

Bonjour bonjour !

Alors voilà mon petit problème. Malgré les superbes explications disponibles sur CCM à cette adresse https://www.commentcamarche.net/contents/585-javascript-l-objet-regexp je ne parviens pas à faire ce que je veux en Javascript.

Je récupère en Javascript le contenu HTML d'une DIV de ma page. Dans cette DIV, j'ai un <table></table> qu'il m'est inutile de récupérer puisqu'il correspond à l'affichage d'un calendrier, et je cherche le moyen de la supprimer.

J'avoue n'avoir aucune connaissance en expressions régulières et comme je suis dessus depuis vendredi après midi, je sèche complètement.

Mon code actuel qui bien sur, ne fonctionne pas :

^[(<TABLE)].*(TABLE>)$

Le but final étant en Javascript d'avoir quelque chose du genre :

reg = new RegExp("^[(<TABLE)].*(TABLE>)$");
document.form.message_bdd.value = document.form.message_bdd.value.replace(reg, '');

Merci d'avance pour l'aide que vous pourrez m'apporter ;-)

A voir également:

Javascript - Supprimer contenu entre deux balises HTML
Supprimer une page word - Guide
Supprimer compte instagram - Guide
Deux comptes whatsapp - Guide
Telecharger javascript - Télécharger - Langages
Supprimer edge - Guide

4 réponses

Réponse 1 / 4

[Dal] Messages postés 6174 Date d'inscription mercredi 15 septembre 2004 Statut Contributeur Dernière intervention 2 février 2024 1 083
21 oct. 2013 à 11:03

Salut sipherion,

Tu peux utiliser une regex dans la méthode String replace().

Quelque chose comme cela :

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<p>Cliquez sur le bouton pour effacer le tableau</p>
<table border="1">
  <tr>
    <th>Lundi</th>
    <th>Mardi</th>
  </tr>
  <tr>
    <td>Booké</td>
    <td>Booké aussi</td>
  </tr>
</table> 
</div>

<button onclick="myFunction()">Effacer</button>

<script>
function myFunction()
{
var str=document.getElementById("demo").innerHTML; 
var n=str.replace(/<table[\s\S]*\/table>/,"");
document.getElementById("demo").innerHTML=n;
}
</script>

</body>
</html>

Dal

sipherion Messages postés 1798 Date d'inscription lundi 22 octobre 2007 Statut Membre Dernière intervention 19 décembre 2016 285
21 oct. 2013 à 11:13

Super, ça marche nickel, il me manquait juste cette expression. Merci beaucoup Dal !

[Dal] Messages postés 6174 Date d'inscription mercredi 15 septembre 2004 Statut Contributeur Dernière intervention 2 février 2024 1 083
Modifié par [Dal] le 21/10/2013 à 11:24

De rien, un petit complément :

La regex

/<table[\s\S]*\/table>/

va matcher plusieurs tableaux, si tu en as plusieurs dans ton div, car la regex ira jusqu'au dernier "/table>". Si cela n'est pas gênant dans ton cas, c'est bien, sinon il faudra matcher un peu plus (elle a un id cette "table" ?), ou alors utiliser un spécificateur "?" comme cela

/<table[\s\S]*?\/table>/

à la place, pour que la regexp soit non gourmande (non-greedy) et matche juste le premier tableau (si c'est bien celui que tu vises).

Dal

sipherion Messages postés 1798 Date d'inscription lundi 22 octobre 2007 Statut Membre Dernière intervention 19 décembre 2016 285
Modifié par sipherion le 21/10/2013 à 11:29

Le contenu de ma DIV sera en fait par la suite transmit à une page qui va envoyer un mail au format HTML. J'ai une autre table dedans mais qui doit aussi dégager, donc tout va bien ;-)
Au pire à l'avenir, est ce que je pourrais utiliser quelque chose du genre

/(<table id='1')[\s\S]*\/table>

pour identifier une table clairement ?

ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
21 oct. 2013 à 11:32

Je réitère ma question : https://forums.commentcamarche.net/forum/affich-28935506-javascript-supprimer-contenu-entre-deux-balises-html#7

pourquoi vous embêter avec un regex alors que le jQuery permet de manipuler facilement n'importe quel élément de la page et les éléments qu'il contient ?

[Dal] Messages postés 6174 Date d'inscription mercredi 15 septembre 2004 Statut Contributeur Dernière intervention 2 février 2024 1 083
Modifié par [Dal] le 21/10/2013 à 12:19

@ThEBiShOp :

jQuery est bien, mais s'il ne l'utilise pas déjà cela crée une dépendance. Quand on fait du jQuery, on a tendance à être déformé et oublier que (ou on ne prend pas la peine de se demander si) l'on peut faire assez simplement les choses sans.

Il n'a pas dit que son tableau avait un id ou une classe. J'ai supposé que le div en a (car il dit qu'il en récupère le contenu).

Son but premier était de supprimer le tableau récupéré dans une variable javascript, pas de le supprimer dans la page affichée (pour les besoins de la démo, c'est ce que fait mon code pour afficher le résultat de la substitution dans la variable, mais c'est juste à des fins d'illustration du résultat).

@sipherion : dans ce cas

/(<table id='1')[\s\S]*?\/table>/

Dal

Edit : slash fermant manquant

Réponse 2 / 4

jeannets Messages postés 26763 Date d'inscription dimanche 9 septembre 2007 Statut Contributeur Dernière intervention 23 avril 2024 5 767
21 oct. 2013 à 10:30

1° tu supprime le code HTML et les 2 Balises TAB et tu essaie dans le navigateur de voir si ça fonctionne bien sans ces balises.

2° A cet endroit tu insert ton code javascript en mettant bien les balises JS..

Tu peux faire ça avec un outil d'aide comme DreamWeaver ou tout simplement avec Bloc-Note.

Si tu as besoin de support JS, tu peux consulter: http://www.editeurjavascript.com/cours/cours_02.php

Ce n'est pas bien compliqué, mais je ne peux pas faire ton code à ta place.

Réponse 3 / 4

sipherion Messages postés 1798 Date d'inscription lundi 22 octobre 2007 Statut Membre Dernière intervention 19 décembre 2016 285
21 oct. 2013 à 10:38

Je ne comprends pas ta réponse jeannets. Tu crois que je n'ai aucune connaissance en programmation ? Désolé si c'est ce que tu as cru en lisant mon message, je me suis peut être mal exprimé, mais ça va, je me débrouille quand même ^^

Mon problème vient de la fonction RegExp ! Je voudrais remplacer le contenu d'une variable JS que je déclare en récupérant le innerHTML d'une DIV en supprimant tout ce qui est entre <table et </table>.

jeannets Messages postés 26763 Date d'inscription dimanche 9 septembre 2007 Statut Contributeur Dernière intervention 23 avril 2024 5 767
21 oct. 2013 à 10:48

Désolé, ben oui, j'ai cru que tu débutais en lisant ton post...

Et je ne saurai pas t'aider sur ce point.. C'est un coup dans l'eau

Réponse 4 / 4

ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
21 oct. 2013 à 11:28

Question probablement bête, mais pourquoi ne pas utiliser le jQuery au lieu de s'embêter avec un regex ?

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function myFunction()
{
    $('#demo table').html('');
}
</script>

sipherion Messages postés 1798 Date d'inscription lundi 22 octobre 2007 Statut Membre Dernière intervention 19 décembre 2016 285
21 oct. 2013 à 11:52

Merci pour ta proposition, mais effectivement ce n'est pas pertinent ici ;-)

ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
21 oct. 2013 à 11:53

Puis-je te demander pourquoi ?

sipherion Messages postés 1798 Date d'inscription lundi 22 octobre 2007 Statut Membre Dernière intervention 19 décembre 2016 285
21 oct. 2013 à 12:33

- Dans mon cas, l'ID dépend d'une sélection précédente ; en fait, l'ID est récupéré via une variable définie par

document.form.idDivTemp.value

(ce qui donne un

document.form.message_bdd.value = document.getElementById(document.form.idDivTemp.value).innerHTML;

)
- Cette solution ne fonctionne qu'avec un tableau alors que dans cette DIV il y en a deux.
- Il peut arriver dans certains cas qu'il faille modifier notre sélection sans recharger la page, si tu supprimes le code HTML le tableau ne s'affiche plus. Il faut donc le supprimer dans la variable temporaire avant son envoi à la page de traitement.

Mais sinon ça fonctionne très bien, j'ai testé ta solution, elle me sera utile dans certains cas ;-)

ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
21 oct. 2013 à 12:38

Le sélecteur jQuery peut être construit comme bon te semble pour manipuler n'importe quel élément du dom, pour le supprimer, le cacher, y ajouter n'importe quoi.

Mon exemple était simplement basé sur la réponse de [Dal], mais heureusement, on peut faire bien d'autres choses, et à mon sens c'est plus pratique à manipuler qu'un regex.

sipherion Messages postés 1798 Date d'inscription lundi 22 octobre 2007 Statut Membre Dernière intervention 19 décembre 2016 285
21 oct. 2013 à 13:30

C'est possible, maintenant le plus simple pour moi qui apprend le JS au fur et à mesure, c'est de commencer à maitriser les fonctions de base, et ensuite envisager de passer à JQuery.

Discussions similaires

Comment supprimer une conversation Messenger pour les 2 personnes ?

Discussions similaires

Newsletters