Entourant les mots individuels dans le texte HTML avec des balises SPAN?

J'ai besoin d'entourer des mots individuels dans un élément HTML avec des balises SPAN. Donc, quelque chose comme ça:

Foo <span class="f1 b0">bar <b>baz</b> boo blah</span> lorem ipsum

Devrait devenir ceci:

 <span>Foo</span> <span class="f1 b0"><span>bar</span> <b><span>baz</span></b> <span>blah</span></span> <span>lorem</span> <span>ipsum</span>

La raison en est que je veux savoir quel mot, en particulier, est sous le curseur en utilisant "document.elementFromPoint (X, Y)". J'ai essayé d'utiliser un simple regex:

 theElement.innerHTML.replace(/\b(\w+)\b/g, "<span>$1</span>")

… mais cela ne fonctionnera pas car l'élément HTML en question aura certainement des éléments à l'intérieur de celui-ci. Je voudrais simplement utiliser cette regex sur innerText au lieu de innerHTML, mais je perdrais tout le formatage existant.

J'ai essayé de marcher les enfants de l'élément, en effectuant ce remplacement de regex sur chacun, mais parfois, les éléments enfants ont leurs propres balises HTML et je ne peux pas comprendre comment remplacer le texte qui vient avant ou après les balises.

Quelqu'un a-t-il une bonne solution?

Pour ce faire, vous devez parcourir les DOM et comprendre comment traiter les nœuds individuels.

Le code de marche de base est le suivant:

 function walk(root) { if (root.nodeType == 3) // text node { doReplace(root); return; } var children = root.childNodes; for (var i = children.length - 1 ; i >= 0 ; i--) { walk(children[i]); } }

La fonction Walk vérifie tous les enfants du noeud d'entrée et:

S'il voit un nœud de texte, il appelle la fonction de remplacement
Sinon il s'appelle récursivement avec le nœud enfant comme nouveau noeud d'entrée.

Notez que, car le code en place remplace les noeuds, la liste des nœuds "enfants" sera affectée par le remplacement. Pour éviter que cela affecte l'algorithme, les enfants sont visités dans l'ordre inverse.

La fonction doReplace est comme ceci:

 function doReplace(text) { var div = document.createElement("div"); div.innerHTML = text.nodeValue.replace(/\b(\w+)\b/g, "<span>$1</span>"); var parent = text.parentNode; var children = div.childNodes; for (var i = children.length - 1 ; i >= 0 ; i--) { parent.insertBefore(children[i], text.nextSibling); } parent.removeChild(text); }

Cela crée un nœud conteneur, puis applique le regex et utilise innerHTML pour analyser le résultat dans un fragment DOM. Les enfants de l'élément div peuvent ensuite remplacer le nœud de texte dans le document. Encore une fois, le déplacement des nœuds se fait dans l'ordre inverse afin que la mutation de la liste du noeud source n'affecte pas la boucle.

Enfin, le changement peut être appliqué en appelant la fonction Walk.

par exemple

 window.onload = function() { walk(document.body); };

Un exemple de travail complet peut être trouvé à http://www.alohci.net/text/html/wordwrapper.htm.ashx

Vous pouvez inspecter la source de ce plugin jQuery pour voir comment ils le font, puis extraire les fonctionnalités dont vous avez besoin.

Essayez d'utiliser la méthode .wrap() jQuery