Assurez-vous qu'un objet range ne commence pas ou ne se termine pas au milieu d'un mot

Question

Mon application nécessite une utilisation intensive des plages (https://developer.mozilla.org/en/DOM/range). En particulier, les utilisateurs mettent fréquemment le texte en surbrillance puis le manipulent. Parfois, les utilisateurs mettent accidentellement en surbrillance un texte contenant un fragment de mot, ce qui produit des résultats bizarres. J'aimerais pouvoir, en fonction d'une plage, vérifier si elle commence ou se termine au milieu d'un mot, puis, si c'est le cas, l'agrandir pour qu'elle comprenne le mot entier qu'elle a commencé/terminé au milieu de.

Answer 1

Je n'ai pas travaillé avec des plages, mais il semble que la surbrillance doit commencer immédiatement après un caractère espace blanc et se terminer immédiatement avant un caractère espace blanc. Vous auriez à écrire une fonction qui effectue cet événement check onmouseup. La réponse à cette fonction devrait être une auto-correction de la surbrillance à l'endroit où elle devrait être, à la fin d'un mot. Je voudrais également le faire fonctionner au début d'une mise en évidence afin qu'un utilisateur puisse cliquer au milieu d'un mot et avoir la surbrillance correcte pour capturer depuis le début du mot afin d'augmenter l'accessibilité pour les utilisateurs avec des interfaces avec des troubles du mouvement. Vous souhaiterez également vous assurer que les caractères espace blanc sont définis en utilisant la méthode de test par rapport à une variable regex de:

/\s+/ 

Answer 2

Que pensez-vous de cela? Kinda hacky, mais je l'ai testé dans Firefox et il a semblé fonctionner. Peut-être qu'il va vous aider à démarrer:

function fixRange(range) 
{ 
    var rangeString = range.toString(); 
    try 
    { 
     while (rangeString[0] != " ") 
     { 
      range.setStart(range.startContainer, range.startOffset - 1); 
      rangeString = range.toString(); 
     } 
     range.setStart(range.startContainer, range.startOffset + 1); 
    } catch (e) {} 
    try 
    { 
     while (rangeString[rangeString.length - 1] != " ") 
     { 
      range.setEnd(range.endContainer, range.endOffset + 1); 
      rangeString = range.toString(); 
     } 
     range.setEnd(range.endContainer, range.endOffset - 1); 
    } catch (e) {} 
    return range; 
} 

Exemple d'utilisation (resélectionne la plage sélectionnée):

var selection = window.getSelection(); 
selection.addRange(fixRange(selection.getRangeAt(0)));