Заменить текст (изменить регистр) в текстовом поле, используя Javascript

Question

Я пытаюсь создать своего рода поле ввода текста с интеллигентным смыслом, в котором при вводе пользователем «и» заменяется на «И \ n» (т. Е. На каждом «и», «и» пишется с большой буквы). и пользователь переходит на новую строку).

Я использовал Javascript для этого:

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

HTML часть выглядит так: < textarea type="text" name="q" id="search" spellcheck="false" onkeyup='Validate();'>< /textarea>

Несмотря на то, что приведенный выше скрипт хорошо работает в Firefox и Chrome, в Internet Explorer он ведет себя как-то неправильно (переводит курсор в конец текста на каждом 'KeyUp').

Также вышеприведенный код не работает для других вариантов «и», таких как «И», «anD» или даже «И».

Answer 1

Я попытался обойти проблему и решил с помощью следующего JavaScript:

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
    }
}

Тонкая нарезка вышеуказанной проблемы и решения:

1) Функция вызывалась при каждой клавише вверх, поэтому ранее «И \ n» повторялась при каждой клавише вверх, вставляя пустую строку при каждом нажатии клавиши. Я избежал вышеизложенного с помощью регулярного выражения:

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

\b = Like Word (чтобы избежать S AND )
$ = Конец строки (так как «и» будет заменено на «И \ n», таким образом, это всегда будет конец строки)
(?!\n) = Не следует новая строка (для предотвращения повторной замены «И \ n» при каждом нажатии клавиши)
i = Для охвата всех вариантов "и", включая "И", "anD" и т. д.

2) Internet Explorer работал неправильно, и позиция курсора не поддерживалась (перемещалась в конец), когда ввод был отредактирован. Это было вызвано (как подсказал Альваро выше) из-за функции замены.
Таким образом, я вставил оператор «if» для вызова функции замены только тогда, когда это необходимо, т. Е. Только когда есть некоторые «и», нуждающиеся в замене.

Спасибо всем за помощь.

Answer 2

Если вы измените содержимое текстовой области, когда пользователь печатает курсор, каретка всегда будет перемещаться до конца, даже в Firefox и Chrome. Просто попробуйте отредактировать то, что вы уже написали, и вы поймете меня. Вы должны переместить курсор в то место, где его ожидают пользователи, что также подразумевает, что вы должны обнаруживать выделенные тексты (это стандартное поведение, которое при наборе текста при выделении удаляет выделенный текст).

Здесь вы можете найти пример кода . Возможно, вы сможете использовать функции doGetCaretPosition (), setCaretPosition ().

Answer 3

Я думаю, что фактический ответ здесь представляет собой смесь двух предыдущих:

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

Вам нужно i, чтобы сделать поиск нечувствительным к регистру, и g, чтобы убедиться, что вы заменяете все вхождения. Это не очень эффективно, так как заменяет предыдущие совпадения на себя, но будет работать.

Чтобы сделать это отдельной функцией:

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

Answer 4

Вам нужно написать код JS, который будет работать как в IE, так и в FireFox. Я думаю, что это то, что вам нужно:

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

Answer 5

попробуйте использовать следующую replace() инструкцию:

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

так как это вызывается неоднократно для измененной строки, вы должны убедиться, что за "и" не следует разрыв строки.

пример (использует цикл и функцию для симуляции пользователя, набирающего буквы):

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);
}

Вы можете проверить это здесь: http://bit.ly/8kWLtr

Answer 6

Я думаю, вы хотите, чтобы ваш replace звонок выглядел так:

replace(/\band\b/i,"AND \n") (см. Ниже)

Таким образом, он не учитывает регистр (/i) и принимает только отдельные слова, которые соответствуют and, поэтому слова «sand» и аналогичные слова, содержащие «и» не совпадают, только «и» владеть.

РЕДАКТИРОВАТЬ : я поиграл с этим, основываясь на комментариях, и я думаю, этот рабочий пример - это то, что нужно.

Заменить событие onKeyUp на onBlur:

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

Так что функция validate запускается только тогда, когда пользователь покидает текстовое поле. Вы также можете запустить его onSubmit.

Я также добавил глобальное переключение (g) и необязательный конечный пробел (\s?) в регулярное выражение:

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

Это вызывает ввод, как это:

sand and clay and water

преобразуется в это, когда вы покидаете текстовое поле:

sand AND
clay AND
water

Вероятно, вам следует проверить это на множестве других случаев.