Remplacer le texte (casse) dans une zone de texte en utilisant Javascript

Question

J'essaie de construire une sorte de zone de saisie de texte intelli-sens, où, lorsque l'utilisateur tape, le 'et' est remplacé par 'AND \ n' (ie sur chaque 'et', le 'et' est en majuscule et l'utilisateur va à la nouvelle ligne).

Le Javascript j'utilisé pour cela est:

 

function Validate() 
{ 
document.getElementById("search").value = document.getElementById("search").value.replace("and","AND \n"); //new line for AND 
} 
 

La partie HTML est comme ceci:

< textarea type="text" name="q" id="search" spellcheck="false" onkeyup='Validate();'>< /textarea> 

Bien que le script ci-dessus fonctionne bien sur Firefox et Chrome, il tri de se comporte mal sur Internet Explorer (amène le curseur à la fin du texte sur chaque 'KeyUp').

Le code ci-dessus ne fonctionne pas pour les autres variantes de 'et' comme 'And', 'anD' ou même 'AND' lui-même.

Answer 1

J'ai essayé de contourner le problème et résolu en utilisant le javascript suivant:

function Validate() { 
    if(document.getElementById("search").value.search(/\band$(?!\n)/i) >= 0){ // for maintaining cursor position 
     document.getElementById("search").value = document.getElementById("search").value.replace(/\band$(?!\n)/i,"AND\n"); //new line for AND 
    } 
} 

mince de trancher le problème ci-dessus et de la solution:

1 La fonction était appelée sur chaque touche, ainsi "AND \ n" était répété sur chaque touche, insérant ainsi une ligne vide à chaque pression de touche. J'évitais ci-dessus en utilisant l'expression rationnelle:

 
/\band$(?!\n)/i 

\b = Comme Word (pour éviter S ET)
$ = Fin de la ligne (comme « et » seront remplacés par « \ n » donc il sera toujours fin de la ligne)
(?!\n) = Non suivi de nouvelle ligne (pour éviter de remplacer de façon répétée « \ n » sur chaque pression de touche)
i = pour couvrir toutes les variantes de « et » y compris « et », « et », etc.

2) Internet Explorer s'est mal comporté et la position du curseur n'a pas été maintenue (déplacée à la fin) lorsque l'entrée a été rééditée. Cela a été causé (comme indiqué par Alvaro ci-dessus) en raison de la fonction de remplacement.
Ainsi, j'ai inséré une instruction "if" pour appeler la fonction de remplacement seulement quand elle est nécessaire, c'est-à-dire seulement quand il y a un "et" nécessitant un remplacement.

Merci à tous pour votre aide.

Answer 2

Je pense que vous voulez que votre replace appel à ressembler à ceci:

replace(/\band\b/i,"AND \n") (voir ci-dessous)

De cette façon, il est insensible à la casse (/i), et ne prend des mots simples qui correspondent à and , donc «sable» et des mots similaires qui contiennent «et» ne correspondent pas, seulement «et» sur son propre.

EDIT: J'ai joué avec autour en fonction des commentaires et je pense que this exemple de travail est ce qui est voulu.

Remplacer l'événement onKeyUp avec onBlur:

<textarea type="text" name="q" id="search" spellcheck="false" onblur='Validate();'></textarea></body> 

Alors que la fonction validate est exécutée uniquement lorsque l'utilisateur quitte la zone de texte. Vous pouvez également l'exécuter onSubmit.

J'ai aussi ajouté un interrupteur global (g) et les espaces de fuite en option (\s?) au regex:

replace(/\band\b\s?/ig,"AND \n") 

Cela provoque l'entrée comme ceci:

sand and clay and water 

être transformé en quand vous quittez la zone de texte:

sand AND 
clay AND 
water 

vous Sh Sans doute tester cela contre un tas de cas.

Answer 3

essayez d'utiliser la déclaration replace() suivante:

replace(/\band(?!$)/ig, "And\n") 

car cela est appelé à plusieurs reprises contre la chaîne modifiée, vous devez vous assurer que le « et » n'est pas suivie d'un saut de ligne.

exemple (utilise une boucle et la fonction pour simuler l'utilisateur de taper les lettres):

function onkeyup() { 
    var str = this; 
    return this.replace(/\band(?!$)/ig, "And\n"); 
}; 

var expected = "this is some sample text And\n is separated by more text And\n stuff"; 
var text = "this is some sample text and is separated by more text and stuff"; 
var input = ""; 
var output = ""; 

for(var i = 0, len = text.length; i < len; i++) { 
    input += text.substr(i,1); 
    output = onkeyup.call(input); 
} 

var result = expected == output; 
alert(result); 
if(!result) { 
    alert("expected: " + expected); 
    alert("actual: " + output); 
} 

vous pouvez le tester ici: http://bit.ly/8kWLtr

Answer 4

Je pense que la réponse réelle est un mélange ici de les deux précédents:

onkeyup="this.value = this.value.replace(/\band\b/ig, ' AND\n')" 

vous avez besoin du i pour rendre le insensibles à la casse et la g pour vous assurer REPLAC e toutes les occurrences. Ce n'est pas très efficace, car cela remplacera les précédents, mais ça marchera.

Pour en faire une fonction distincte:

function validate() { 
    document.getElementById('search') = document.getElementById('search').replace(/\band\b/ig, ' AND\n'); 
} 

Answer 5

Si vous modifiez le contenu textarea pendant que l'utilisateur est en train de taper le curseur se déplace toujours à la fin, même dans Firefox et Chrome. Essayez d'éditer quelque chose que vous avez déjà écrit et vous me comprendrez. Vous devez déplacer le curseur vers la position exacte où les utilisateurs l'attendent, ce qui implique également que vous devez détecter les sélections de texte (c'est un comportement standard que de taper lorsque vous avez une sélection supprime le texte sélectionné). Vous pouvez trouver ici quelques sample code. Vous pourriez être capable d'utiliser les fonctions doGetCaretPosition(), setCaretPosition().

Answer 6

Vous devez écrire un code JS qui s'exécute dans IE et FireFox. Je pense que c'est ce que vous avez besoin:

var s = document.getElementbyId('Search'); 
s.value = s.value.replace('and', 'AND \n');