Mettre en surbrillance des phrases longues à l'aide de jQuery

Question

Je souhaite mettre en surbrillance des phrases longues (disons 50 mots ou plus) contenues dans un tableau d'objets de paragraphe sur une page, par exemple $("#content p"). Je ne suis pas sûr de savoir comment aborder cela. J'ai essayé à l'origine de mettre en surbrillance toutes les phrases, mais j'ai rencontré des problèmes lorsqu'elles contenaient des balises HTML (l'exemple de code surligné sur le net ne concerne que les mots individuels, donc ils ne tiennent pas compte des nœuds enfants). Je suis conscient que la division des phrases est difficile; Je voudrais utiliser.!? suivi soit par un espace puis une lettre majuscule ou rien du tout (c'est-à-dire la fin du paragraphe).

Merci d'avance pour toute aide/conseil.

Answer 1

Comme vous l'avez dit que ça va être difficile d'obtenir le droit, compte tenu du fait que vous, n'allez les attraper tous, je bâton avec quelque chose de simple comme:

var regex = \[^.!?]{50,}[.!?]\; 

Obtenir trop intelligent et vous finirez par passer plus de temps à coder pour les cas limites que je suppose que vous le feriez raisonnablement.

Answer 2

Je ne suis pas sûr que la meilleure chose à faire est de le faire du côté client. Je considérerais renvoyer les paragraphes au serveur pour faire le travail. Mais le travail devrait être le même dans tous les cas. Tout d'abord, prenez tout le contenu d'un paragraphe assurez-vous de l'avoir tout ce qu'il pourrait être dans quelques nœuds dans le DOM. (Read This) Ensuite, vous devrez créer un analyseur qui recherche vos caractères séparés tout en les ignorant lorsqu'ils sont dans des entités HTML.

À titre d'exemple le. dans un attribut href devrait être ignoré et non divisé. Tout en faisant l'analyse, vous pouvez garder un nombre de mots ainsi que de travailler sur les espaces. Faites de chaque phrase un objet qui contient toute la phrase et le nombre de mots. Vous pouvez donc pousser ces objets dans un tableau qui représente le paragraphe. Une fois cela fait, vous pouvez ensuite itérer dans le tableau et envelopper toute phrase dans un intervalle pour mettre en évidence avec CSS si le nombre de mots atteint votre seuil.

Le problème majeur est les balises qui peuvent être des parties de deux phrases telles que les suivantes.

I'm typing <b> in bold. NOW!</b> 

ce que j'ai parlé de faire ne traite pas de cela, mais vous pourriez faire l'analyseur plus complexe pour soutenir plus tard que. Donc, un aperçu rapide de mon analyse décousue à travers tous les caractères avec une machine à états qui traite des mots de comptage et de division au bon endroit. Sur split, ajoutez les données collectées à un tableau. Une fois terminé, parcourez le tableau en sortie des phrases nouvellement enveloppées.

Answer 3

Ceci est probablement une solution assez lente, et laid aussi, mais il devrait être assez simple code:

Lire tout le texte dans une chaîne, puis Parse à travers elle, en comptant les caractères et trouver tous.! ?-personnage. Dans la boucle d'analyse, vous recherchez également < et>, où < signifie "ignore all.!? Jusqu'à trouver un autre>". Ensuite, chaque fois que vous trouvez un caractère.!? -, vous vérifiez la longueur depuis le dernier, et si c'est assez long, vous sauvegardez l'index pour le point de départ et le point final dans un tableau ou quelque chose. Lorsque tout est fait, faites une autre boucle, qui déplace les sous-chaînes de la première chaîne dans une nouvelle chaîne, en ajoutant une balise de surbrillance à chaque "phrase longue" et en ajoutant une balise de fin à la fin de cela, avant de continuer.

Lorsque vous avez terminé, mettez la nouvelle chaîne de retour là où vous l'avez ... à partir

Answer 4

Pour ce faire, vous devez obtenir le code HTML de chaque paragraphe (node.html()), puis remplacer toutes les balises HTML avec le même numéro des espaces. Cela devrait être assez droit et comme vous pouvez juste regarder pour les supports angulaires d'ouverture et le premier support de fermeture. Vous devez d'abord le faire pour éviter que les points d'arrêt et les mots à l'intérieur de l'étiquette ne compliquent le reste de l'algorithme, mais aussi pour empêcher qu'une étiquette soit comptée comme un mot. Diviser le texte en fonction d'un point d'arrêt, suivi de rien ou d'une quantité d'espace pour obtenir vos phrases. Vous devez effectuer cette division manuellement à l'aide d'une expression régulière correspondante afin de pouvoir suivre les positions de début et de fin de la phrase dans la chaîne d'origine.

Ensuite, divisez chaque phrase par des espaces et supprimez les 'mots' du tableau qui ne contiennent que des espaces. Cela vous donne la longueur de la phrase. Si la limite dépasse votre limite, insérez le code HTML approprié aux positions de début et de fin de la phrase dans votre chaîne HTML d'origine. Vous aurez besoin de garder une trace de combien de HTML supplémentaire vous avez ajouté afin que vous puissiez trouver les bonnes positions de début et de fin des phrases longues suivantes.