[Résolu]Remplacement de texte par du HTML dans un DOM textnode

Re-bonjour à tous

Toujours dans mon bricolage de script bizarroïde, me voilà confronté à une colle.

Suite à ma fonction de parcours (postée ici) j'appelle une fonction en passant en paramètre un noeud texte (objet DOM). Jusqu'ici tout va bien, le problème surviens lorsque la fonction appelée fait son boulot : des remplacements.

Un peu de code simplifié pour éclaircir l'affaire :

function parseBBCode(TextNode) {
	TextNode.nodeValue = TextNode.nodeValue.replace(regexp, '<img src="images/x.jpg?" />');
}

ceci, au lieu de m'afficher l'image souhaitée, m'affiche simplement le code de la balise image comme renseignée dans la fonction (et ce n'est pas vraiment le but de la manoeuvre).

Je cherche donc un moyen de remplacer du texte par du code HTML dans un noeud texte.
Logiquement je pensais suivre la méthode suivante :
- trouver la position dans la chaine de mon motif chercher,
- "couper" le TextNode pour en faire 2 : le premier contenant le texte avant le motif à remplacer, le second contenant le texte après le motif.
- Créer mes éléments HTML par la méthode document.createElement() et les insérer entre les deux TextNode

Créer des éléments, ce n'est pas un problème je sais faire, mais couper un noeud texte en deux et insérer des nouveaux noeuds entre les deux TextNode créés : aucune idée de la façon de procéder.

Quelqu'un a-t-il un idée sur la manière de réaliser ce traitement (sans innerHTML) ?
Merci

Modifié par Willmore (07 Nov 2007 - 19:53)

A vue de nez, je dirai que ça revient à :

- trouver le contenu textuel CT du noeud texte NT qui t'intéresse
- créer un nouveau noeud texte NT' avec la seconde moitié de CT
- nettoyer CT dans NT
- insérer NT' après NT grâce à document.insertAfter()
- créer les noeuds HTML ad hoc et les insérer entre NT et NT' grâce à document.insertAfter() / document.insertBefore()

Willmore a écrit :
Toujours dans mon bricolage de script bizarroïde, me voilà confronté à une colle.

lol

Un petit script vite fait, bien brute de pomme. Si ça peut t'aiguiller :

var t = document.createTextNode('voici un lien : [ url=http://www.google.fr]gooooogle[/ url] trop cool!');
document.body.appendChild(t);
parse(t);

function parse(textNode) {
	var urlreg = /\[ url=([^\]]+)](.*?)\[\/ url]/;
	var match = textNode.nodeValue.match(urlreg);
	var charStart = match ? textNode.nodeValue.search(urlreg): -1;
	var charEnd = charStart >= 0 ? charStart + match[0].length: -1;
	if(charStart != -1 && charEnd != -1) {
		var firstTextNode = document.createTextNode(textNode.nodeValue.substring(0, charStart));
		var lastTextNode = document.createTextNode(textNode.nodeValue.substring(charEnd));
		var newLink = document.createElement('a');
		newLink.setAttribute('href', match[1]);
		newLink.appendChild(document.createTextNode(match[2]));
		textNode.parentNode.replaceChild(newLink, textNode);
		newLink.parentNode.insertBefore(firstTextNode, newLink.previousSibling);
		newLink.parentNode.insertBefore(lastTextNode, newLink.nextSibling);
	}
}

Ou comment faire simple (innerHTML) quand on peut faire compliquer (ci-dessus)

Merci de vos réponses, je vais essayer de me baser sur tout ça par arriver à mes fins et je vous tiens au courant.

a écrit :
bien brute de pomme.

hummm c'est bon les pommes ( je suis déjà loin....).

Par la même occasion j'expliquerai un peu plus en détails ce que je suis en train de bricoler (des fois que ça donne des idées à quelqu'un d'autre).

La raison pour laquelle je n'utilise pas innerHTML, c'est que dans mes premiers essais pour mon projet, les remplacements effectué par innerHTML ne donnaient pas vraiment un bon résultat (par exemple il arrivais que des éléments de la page soient altérés alors qu'il n'y avait aucune raison à celà). D'où ma nouvelle passion pour l'arborescence DOM . Je reviens un peu plus tard avec des nouvelles

Z'êtes des dieux, ça marche impeccable.
Il me reste à m'occuper des mes ch'tites fonctions de calculs et tout le toutim pour générer les objets à insérer.

Concernant les détails sur le script que j'essaie de développer :
Il s'agit de permettre aux utilisateurs d'un forum/CMS quelconque de pouvoir utiliser une collection de nouveau BBCode permettant de généré du contenu en rapport avec un jeu. Les BBCodes ne sont donc pas des éléments simplifiés de mise en forme, mais des "raccourcis" pour du contenu bien précis. Par exemple les compétences ou les items d'un jeu de rôle en ligne (on remplace le nom de l'objet/compétence par son icône qui est liée à une infobulle).

Jusqu'ici on réalisait celà grace à un script PHP qui parsait le bbcode après que le forum/CMS ait traité les bbcodes "standards", mais l'intégration était assez contraignante, d'où le besoin de traiter ces BBCodes spéciaux en dehors du processus "normal".

Merci encore pour le gros coup de main !