Mettre en surbrillance le texte entre les balises personnalisées

Dans un fichier xhtml, je souhaite mettre en évidence le texte entre deux balises à fermeture automatique s1 et s2 dont l'attribut "ind" a la même valeur. Par exemple. <s1 ind="1"/> et <s2 ind="1" /> Ex. <html> <body> <a>  Certains <s1 ind="1"/> text> <c> données <s2 ind="1"/> ici </c> </a> </body> </html> Je veux "données texte" pour obtenir en surbrillance. Est-il possible de réaliser en utilisant javascript/jquery? Je pourrais avoir beaucoup de telles paires de balises à fermeture automatique s1 et s2 avec une valeur unique pour "ind" pour la paire, indiquant que le texte à l'intérieur d'elles doit être mis en évidence.Mettre en surbrillance le texte entre les balises personnalisées

Source

2010-04-20 Rachel

avez-vous finalement trouvé la solution? J'en ai besoin aussi. – ehsan

Il n'y a pas de "balises personnalisées" en (X) HTML. Vous ne pouvez pas juste créer des tags. Ils peuvent fonctionner dans certains navigateurs, mais ce n'est pas quelque chose que vous devriez compter. Utilisez des balises "normales" telles que div et span avec une classe.

EDIT: Ok, je pense que je reçois ce que vous voulez maintenant. Cependant, vous ne pouvez toujours pas utiliser des éléments personnalisés ni ceux qui se ferment automatiquement, surtout si vous devez prendre en charge IE, car il ne prend pas en charge non plus. Vous aurez besoin d'utiliser des éléments vides au lieu, tels que:

<html><body><a><b>Some <span id="s1-1"></span> text></b> <c>data <span id="s2-1"></span>here</c> </a></body></html>

Ce que vous devez faire est ensuite parcourir l'arborescence du document en commençant par  et se terminant par  et « envelopper » tous nœuds texte trouvé sur le chemin avec span s et une classe que vous pouvez utiliser pour surligner.

Quelque chose comme ça (non testé, du haut de ma tête et très probablement tort parce que je suis fatigué):

function wrapUntil(element, nr) { 
    if (element.id === "s2-" + nr) 
    return; 
    if (element.nodeType === 3) { 
    var span = document.createElement("span"); 
    span.className = "highlight-" + nr; 
    element.parentNode.replaceChild(span, element); 
    span.appendChild(element); 
    element = span; 
    } else { 
    var child = element.firstChild; 
    if (child) { 
     wrapUntil(child, nr); 
    } 
    } 
    var sibling = element.nextSibling(); 
    if (sibling) 
    wrapUntil(sibling, nr); 
    else 
    wrapUntil(element.parentNode(), nr); 
} 
wrapUntil(document.getElementById("s1-1"), "1");

BTW, selon le lieu et la façon dont vous obtenez vos données, cela peut être quelque chose vous devriez faire côté serveur au lieu de JavaScript.

Source

2010-04-20 15:38:27 RoToRa

Les balises personnalisées à fermeture automatique sont simplement un indicateur pour le texte à mettre en surbrillance qui peut s'étendre à travers d'autres balises html. Si j'ai une paire d'étiquettes d'envergure à fermeture automatique avec le même identifiant/autre attribut possible. Existe-t-il un moyen de mettre en évidence le texte entre les balises span ayant la même valeur d'identifiant (bien que id doit être unique). Je suis plus précis dans l'utilisation des étiquettes de fermeture automatique car il pourrait y avoir d'autres étiquettes entre le texte à mettre en évidence. – Rachel

Merci. Je vais essayer ça. – Rachel

Pour le xhtml avec les balises span «s1-1» et «s2-1» que vous avez montrées, pouvez-vous montrer un exemple de format de sortie avec des balises span pour la mise en surbrillance. Cela m'aidera à comprendre ce que vous essayez de faire. – Rachel

au lieu d'utiliser vos « balises personnalisées » vous devez utiliser un span ou div avec une classe nommée highlight:

<span class="highlight">This text is highlighted</span>

avec CSS, vous pouvez formater votre texte en surbrillance comme vous le voulez:

.highlight { background-color:yellow; font-weight:bold }

avec jQuery vous pouvez ajouter ou supprimer la classe highlight:

$('span').addClass('highlight') 
$('span').removeClass('highlight')

EDIT: maintenant j'ai votre problème.

La réponse est non, vous ne pouvez pas hightlight un texte couvrant accross autres balises html, comme ceci:

This <b>code <span class="highlight">will</b> not</span> work

Vous devez fermer la balise span avant  et l'ouvrir à nouveau après:

This <b>code <span class="highlight">will</span></b> 
<span class="hightlight"> work</span> very well.

Source

2010-04-20 15:59:53

Avec la balise span, je dois m'assurer que le texte à mettre en surbrillance doit se trouver dans les balises de début et de fin de plage. Dans mon cas, le texte à mettre en surbrillance peut comporter d'autres balises qui peuvent ne pas être fermées dans l'intervalle. Je veux avoir des étiquettes à fermeture automatique pour indiquer mon texte à mettre en évidence. Existe-t-il un moyen de mettre en évidence le texte entre deux balises span à fermeture automatique ayant la même valeur pour certains attibute say id (bien que id devrait être unique)/custom attibute? – Rachel

Y at-il un moyen de remplir les balises span pour tous les nœuds de texte entre toutes les paires s1, s2 avec le même "ind". c'est-à-dire et en utilisant javascript/jquery? – Rachel

Mettre en surbrillance le texte entre les balises personnalisées

Répondre

Questions connexes