Générer des DIV à partir d'une valeur texte

Résolu/Fermé

olidol Messages postés 4 Date d'inscription vendredi 16 novembre 2012 Statut Membre Dernière intervention 21 novembre 2012 - Modifié par olidol le 17/11/2012 à 03:09
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 - 21 nov. 2012 à 11:01

Bonjour,
Je souhaite générer des div à partir d'une valeur texte récupérée d'un input text.
Exemple, j'écris dans mon input "test", cela me créé en html quelque chose de cette ordre là :
<div class="t"> T </div>
<div class="e"> E </div>
<div class="s"> S </div>
<div class="t"> T </div>

L'objectif final est de pouvoir proposer au visiteur d'écrire un texte (via input) qui sera réinterprété en image (1 image = 1 lettre) dans une div prévue spécialement à cet effet.

J'arrive actuellement à récupérer ce que l'utilisateur rédige, à l'affiche, à décomposer ce message lettre par lettre pour pouvoir les manipuler, mais je bloque à ce niveau : je souhaite remplacer ces lettres par des <div class="a"> </div>, <div class="b"> </div>,<div class="c"> </div>...
J'ai l'impression que je ne peux pas mettre autant d'html que je le voudrai avec le replace ? On m'a parlé de boucle également ? Voici mon code.

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript"> 
function showMsg(){ 
var userInput = document.getElementById('userInput').value; 
var userInputSplit=userInput.split(""); 
document.getElementById('userMsg').innerHTML = userInputSplit; 
} 
</script> 
</head> 
<body> 
<p id="userMsg"></p> 
<input type="input" maxlength="40" id="userInput" onkeyup="showMsg()" value="ecrivez ici" /> 
</body> 
</html>

En exemple je peux vous citer ce site : http://www.google-type.com/ à la différence que ce site va carrément chercher des images dans google image, pour ma part tout doit être directement sur mon serveur.

Je profite de mon premier message pour féliciter cette communauté qui m'a apporté beaucoup de solutions dans de nombreux domaines, mais aujourd'hui, le formulaire de recherche ne suffit plus. Merci à vous.
Olivier

A voir également:

Générer des DIV à partir d'une valeur texte
Recherche à partir d'une image - Guide
Trouver un nom à partir d'une adresse ✓ - Forum Loisirs / Divertissements
Excel si cellule contient partie texte ✓ - Forum Excel
Si cellule contient texte alors ✓ - Forum Excel
Comment générer un qr code - Guide

2 réponses

Réponse 1 / 2

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
17 nov. 2012 à 18:33

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript"> 
function showMsg(){ 
var userInput = document.getElementById('userInput').value; 
var userArray=userInput.split(""); //c'est un array
//boucle sur l'array
var sortie="";
for (i=0;i< userArray.length;i++){
	sortie += '<div class="'+userArray[i].toLowerCase()+'">'+userArray[i]+'</div>';
	//toLowerCase convertit la mettre en minuscule
}
document.getElementById('userMsg').innerHTML = sortie; 
} 
</script> 
</head> 
<body> 
<p id="userMsg"></p> 
<input type="input" maxlength="40" id="userInput" onClick="this.value='';" onkeyup="showMsg()" value="ecrivez ici" /> 
</body> 
</html>

olidol Messages postés 4 Date d'inscription vendredi 16 novembre 2012 Statut Membre Dernière intervention 21 novembre 2012
21 nov. 2012 à 00:40

ca marche, merci !

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
21 nov. 2012 à 11:01

alors mets le sujet en resolu
Merci

Réponse 2 / 2

DarkAurora Messages postés 417 Date d'inscription lundi 26 novembre 2007 Statut Membre Dernière intervention 21 janvier 2013 27
19 nov. 2012 à 10:21

tu définies un contain avec un id tell que : ID_Contain et a chaque fois que tu souhaite ajouter une div tu peux faire => $('ID_Contain').append('<div class="ta_class"> ton image </div>');

Discussions similaires

Annuaire portable gratuit à partir d'un nom

Trouver le mot réellement écrit en lettres capitales PIX

Formule Excel : "SI" une cellule contient un mot, alors ?

Comment trouver un numéro à partir du nom et prénom

Trouver un numero de portable a partir d'un nom svp

Discussions similaires

Newsletters