Retirer des span d'un tableau d'objet dynamiquement

Version imprimable

20/12/2021, 16h44
d3LTa7

Retirer des span d'un tableau d'objet dynamiquement
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:

1 2 3 4 5 6 7 8 9 10 11 Tableau = [ { label : "titre 1", texte : "mon super texte" }, { label : " 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 !
20/12/2021, 18h16
NoSmoking
Bonjour,

Citation:

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

oui et supprimer à la lecture le indésirable.

As-tu essayé avec un simple leTexte.replace("","").

Quelque chose comme :
Code:

1 2 3 Tableau.forEach((el) => { console.log(el.texte.replace("", "")) });

Bonjour,

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

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...)

21/12/2021, 15h41
NoSmoking
Citation:

à 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:

1 2 3 4 Tableau.forEach((el) => { el.label = el.label.replace("", "")); }); 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:

1 2 3 4 const regSpan = //gi; Tableau.forEach((el) => [ el.label = el.label.replace(regSpan, "")); });
21/12/2021, 15h54
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:



alors tu remplaces par '' sinon si il y a

Code:



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
21/12/2021, 15h58
NoSmoking

Essaie avec

Code:

const regSpan = //gi;

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:

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(', '') 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 : 

J'ai donc testé avec la constante regSpan :
Code:

1 2 3 4 5 6 7 8 for (let k = 0; k !== s.lines.length; ++k) { const sl = s.lines[k] const regSpan = //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 :(

Code:

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);
}

Citation:

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:

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:

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 !

C'est parfait ! Merci beaucoup jreaux62 et NoSmoking !

Effectivement, j'avais mal copié mon code !

Ce qui donne maintenant :

Code:

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);
}