Примеры JavaScript - Как заменить выделенный текст в TEXTAREA на другой?

Как заменить выделенный текст в TEXTAREA на другой?

Как это ни "странно" :-), но реализация ветвится из-за разных методов работы с выделениями в IE и Mozilla/Gecko:

IE4+

В Internet Explorer используем объект selection, который представляет текущее выделение и его метод createRange, создающий объект TextRange из текущего выделения. Полученный TextRange объект имеет свойство text (для чтения и записи), которое и дает нам выделенный текст. Т.е. прочитали TextRange.text, сделали изменения и записали назад.

См. реальное использование в примере ниже.

Mozilla/Gecko

Ну, а здесь ситуация выглядит несколько по-другому: для достижения цели используем свойства selectionStart и selectionEnd самого объекта textarea, которые содержат начальную и конечную позицию выделения соответственно. А имея текст и зная в нем начало и конец для замены, мы можем легко заменить выделенный фрагмент на другой используя, например метод "substr()".

Пример:

function replaceSelectedText(obj,cbFunc)
{
 obj.focus();
 
 if (document.selection) 
 {
   var s = document.selection.createRange(); 
   if (s.text)
   {
     eval("s.text="+cbFunc+"(s.text);");
     s.select();
     return true;
   }
 }
 else if (typeof(obj.selectionStart)=="number")
 {
   if (obj.selectionStart!=obj.selectionEnd)
   {
     var start = obj.selectionStart;
     var end = obj.selectionEnd;

     eval("var rs = "+cbFunc+"(obj.value.substr(start,end-start));");
     obj.value = obj.value.substr(0,start)+rs+obj.value.substr(end);
     obj.setSelectionRange(end,end);
   }
   return true;
 }

 return false;
}

В качестве аргумента ф-ии передается объект textarea и имя вспомогательной функции, которая принимает в качестве аргумента выделенный текст и возвращает новый текст, который заменит выделенный текст. После замены текста курсор устанавливается в конец выделения.

Пример использования:

//Определяем вспомогательную ф-ю которая
//принимает строку и возвращает её в нижнем регистре
function lCase(s){return s.toLowerCase();}

//заменяем выделенную строку в нижний регистр
replaceSelectedText(document.formName.textareaName,'lCase');