Discussion :

[d3LTa7]

Bonjour !

Je cherche a retirer des balises span et leur contenu d'un tableau d'objet avec un code javascript

Pour expliquer, j'ai un affichage d'un tableau que je voudrais exporter en pdf via un bouton. Ce tableau a, sur certains titres, des icone mis en span. Mais pour l'exportations des données j'aimerais retirer ces icones et donc ces span.

Ca se présente plus ou moins comme ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
Tableau = [
  {
    label : "titre 1",
    texte : "mon super texte"
  },
  {
    label : "<span class='icon'></span> titre 2",
    texte : "mon super texte 2"
  }
]

Certains ont des icones et d'autres non donc il faudra surement faire avec une boucle et condition je suppose... :/

Voila j'espère avoir été clair

Bonne soirée et merci d'avance !

[NoSmoking]

Bonjour,

donc il faudra surement faire avec une boucle et condition je suppose

oui et supprimer à la lecture le <span> indésirable.

As-tu essayé avec un simple leTexte.replace("<span class='icon'></span>","").

Quelque chose comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
Tableau.forEach((el) => {
  console.log(el.texte.replace("<span class='icon'></span>", ""))
});

[jreaux62]

Bonjour,

à supposer qu'on modifie le tableau lui-même :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var reg_no_span = /(\<span[^\>]*\>[^\<]*\<\/span\> ?)/gi;
Tableau.forEach((el,i) => {
 Tableau[i].label = el.label.replace(reg_no_span, ''); // label
});
console.log( Tableau );

(il y a certainement plus court...)

[NoSmoking]

à supposer qu'on modifie le tableau lui-même :

dans une boucle forEach la fonction callback peut modifier l'élément en cours de traitement, on peut donc écrire plus simplement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
Tableau.forEach((el) => {
  el.label = el.label.replace("<span class='icon'></span>", ""));
});
console.log(Tableau);  // le contenu de Tableau est modifié

Si le contenu de la balise est amené à être différent d'une icône à l'autre on peut effectivement passer par une regExp et dans ce cas j'utiliserais un simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
const regSpan = /<span .+span>/gi;
Tableau.forEach((el) => [
  el.label = el.label.replace(regSpan, ""));
});

[d3LTa7]

Merci pour vos réponses !

@NoSmoking : Alors ça marche nikel ! Super ! Sauf que j'ai 2 "span" différent dans les classes :/ Du coup, est-ce que je peux caler une condition la dedans du genre "si il y a

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<span class="icon1"></span>

alors tu remplaces par '' sinon si il y a

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<span class="icon2"></span>

tu remplaces aussi par '' sinon tu fais rien... J'ai réfléchi à la question mais je vois pas comment ou plutot avec quel méthode je peux repéré ces fameux span et ensuite les remplacer !

@jreaux62 : J'ai essayé avec ta variable en regex mais malheureusement il aime pas trop... Je ne sais pas si c'est le faite que je sois sur VueJS (mais le fichier sur lequel je travail est bien un .js) en plus je suis pas super fort en regex donc compliqué pour moi de l'adapter :p

[NoSmoking]

Essaie avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

const regSpan = /<span class='icon.+span>/gi;

[d3LTa7]

Hello !

Désolé pour ma réponse un peu tardive avec les fêtes de fin d'année...

J'ai donc essayé ta solution NoSmoking mais il semblerais que cela ne marche pas pour moi ou alors je m'y suis mal pris :

Voici le code avec la solution d'avant (juste avec une seule classe à remplacer) qui marche super bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
for (let k = 0; k !== s.lines.length; ++k) {
        const sl = s.lines[k]
        const sltext = sl.label.replace(<span class="glyphicon glyphicon-user"></span>', '')
        const line = [{ border: borderLine, text: sltext, fontSize: 10, color: '#505F6E', margin: [1, 3, 1, 3] }]
        body.push(line)
      }

Mais il y a une autre classe qui m'ennui : <span class="glyphicon glyphicon-member"></span>

J'ai donc testé avec la constante regSpan :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
for (let k = 0; k !== s.lines.length; ++k) {
        const sl = s.lines[k]
        const regSpan = /<span class='glyphicon.+span>/gi
        const sltext = sl.label.replace(<regSpan, '')
        const line = [{ border: borderLine, text: sltext, fontSize: 10, color: '#505F6E', margin: [1, 3, 1, 3] }]
        body.push(line)
      }

Mais ca ne marche pas

[jreaux62]

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
for (let k=0; k!==s.lines.length; k++)
{
	let sl = s.lines[k];
	let regSpan = /<span class=.+</span>/gi;
	let sltext = sl.label.replace(regSpan, '');
	let line = [{ border: borderLine, text: sltext, fontSize: 10, color: '#505F6E', margin: [1, 3, 1, 3] }];
	body.push(line);
}

[NoSmoking]

J'ai donc essayé ta solution NoSmoking mais il semblerais que cela ne marche pas pour moi ou alors je m'y suis mal pris

Si je teste :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const Tableau = [{
    label: "titre 1",
    texte: "mon super texte"
  },
  {
    label: "<span class='icon'></span> label 2",
    texte: "mon super texte 2"
  },
  {
    label: "titre 2",
    texte: "mon super texte"
  },
  {
    label: "<span class='glyphicon glyphicon-user'></span> label 3",
    texte: "autre super texte"
  }
]
const regSpan = /<span .+span>/gi;
Tableau.forEach((el) => {
  el.label = el.label.replace(regSpan, "");
});
console.log(Tableau); // le contenu de Tableau est modifié

toutes les « élémenst span » sont supprimés, j'obtiens :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[{
    "label": "titre 1",
    "texte": "mon super texte"
  },
  {
    "label": " label 2",
    "texte": "mon super texte 2"
  },
  {
    "label": "titre 2",
    "texte": "mon super texte"
  },
  {
    "label": " label 3",
    "texte": "autre super texte"
  }
]

nota : il y a des erreurs dans ton code, absence de guillemet ouvrant par exemple !

[d3LTa7]

C'est parfait ! Merci beaucoup jreaux62 et NoSmoking !

Effectivement, j'avais mal copié mon code !

Ce qui donne maintenant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
for (let k=0; k!==s.lines.length; k++)
{
	let sl = s.lines[k];
	let regSpan = /<span .+span>/gi;
	let sltext = sl.label.replace(regSpan, '');
	let line = [{ border: borderLine, text: sltext, fontSize: 10, color: '#505F6E', margin: [1, 3, 1, 3] }];
	body.push(line);
}