Javascript Girl
  1. Javascript Girl
  3. Mettre une étiquette autour du texte en surbrillance de l'utilisateur?
Intereting Posts
Comment enveloppez setTimeout dans une promesse Javascript / jQuery ne s'exécute pas dans IE jusqu'à ce que le corps de la page soit moused XCode Build ne met pas à jour JS et HTML FormatTime avec "h" au lieu de ":" comme séparateur Comment faire un DIV toujours flotter sur l'écran en haut à droite? Est-ce que simpleGrid nécessite des téléchargements supplémentaires? La fonction des événements iOS 6 js n'est pas appelée si SetTimeout est activé Testez une fonction React Component avec Jest Une expression régulière pour correspondre aux caractères non-anglais? Forcer le clavier numérique iOS avec un motif personnalisé / monnaie Telerik radGrid – persiste l'état du client sur sort / paging / filter Problème modale de modus Modus de Bootstrap JavaScript: Faites défiler jusqu'à la sélection après avoir utilisé textarea.setSelectionRange dans Chrome Comment lier à des onglets avec jtabs? 'Jquery n'est pas défini' lors de l'utilisation de l'application webpack pour charger le bootstrap

Mettre une étiquette autour du texte en surbrillance de l'utilisateur?

Je dois obtenir la zone sélectionnée par l'utilisateur d'une zone de texte, puis insérer les <a> tags autour d'elle.

J'utilise ceci pour obtenir la zone sélectionnée par l'utilisateur: 

 var textComponent = document.getElementById('article'); var selectedText; if (document.selection != undefined) { textComponent.focus(); var sel = document.selection.createRange(); selectedText = sel.text; } // Mozilla version else if (textComponent.selectionStart != undefined) { var startPos = textComponent.selectionStart; var endPos = textComponent.selectionEnd; selectedText = textComponent.value.substring(startPos, endPos) }

Maintenant, je sais que je peux faire une recherche de chaîne pour le texte sélectionné par l'utilisateur et insérer une balise autour de celle-ci, mais ce qui se passe si l'utilisateur sélectionné texte apparaît deux fois dans le texte, par exemple.

Bonjour à vous, au revoir à vous.

Si l'utilisateur met en surbrillance le deuxième «vous» pour le lien qu'ils souhaitent, il est certain qu'un remplaçant de chaîne mettra une étiquette autour de chaque instance de «vous».

Quelle est la meilleure façon de le faire?

Vous pouvez utiliser mon plug-in jQuery pour cette ( démo ): 

 $("#article").surroundSelectedText('<a href="foo.html">', "</a>");

Alternativement, vous pouvez utiliser la fonction getInputSelection() que j'ai publiée sur getInputSelection() Stack quelques fois pour obtenir les index de caractères de début et de fin de la sélection dans tous les principaux navigateurs et puis faire une substitution de chaîne sur la value la zone de texte: 

 var sel = getInputSelection(textComponent); var val = textComponent.value; textComponent.value = val.slice(0, sel.start) + '<a href="foo.html">' + val.slice(sel.start, sel.end) + "</a>" + val.slice(sel.end);

Pourquoi capturer le texte sélectionné du tout? Ce que vous voulez vraiment, ce sont les positions de début / fin pour déposer les balises. 

 var textComponent = document.getElementById('article'); var selectedText; var startPos; var endPos; // the easy way if (textComponent.selectionStart != undefined) { startPos = textComponent.selectionStart; endPos = textComponent.selectionEnd; } // the hard way else if (document.selection != undefined) { textComponent.focus(); var sel = document.selection.createRange(); var range = document.selection.createRange(); var stored_range = range.duplicate(); stored_range.moveToElementText(textComponent); stored_range.setEndPoint( 'EndToEnd', range ); startPos = stored_range.text.length - range.text.length; endPos = startPos + range.text.length; } // add in tags at startPos and endPos var val = textComponent.value; textComponent.value = val.substring(0, startPos) + "<a>" + val.substring(startPos, endPos) + "</a>" + val.substring(endPos);

Code IE modifié à partir de cette référence .

EDIT: Notez le commentaire de Tim Down sur les nouvelles lignes. Aussi, utilisez probablement sa solde, car c'est mieux.