getSelection с многократным вхождением текста заменяет первое вхождение не правильным выбором - PullRequest
0 голосов
/ 02 июня 2011

Мне трудно выбрать текст и заменить его, когда есть несколько случаев.Он всегда возвращается к первому вхождению и заменяет его.

Вот сценарий, который я использую, и если выбор появляется только тогда, когда я префект.Когда он появляется несколько раз, он захватывает первый.

var self=$('#textarea');
GetSelected={};
GetSelected=function(){
    var txt='';
    if(window.getSelection){
        txt=window.getSelection();
    }
    else if(document.getSelection){
        txt=document.getSelection();
    }
    else if(document.selection){
        txt=document.selection.createRange().text;
    }
    return txt;
}

self.html(self.html().replace(selection, '<b>' + selection + '</b>'));

Есть ли что-то, чего мне не хватает, кто знает, какой выбор заменить?

Ответы [ 3 ]

0 голосов
/ 02 июня 2011

Основная проблема здесь заключается в том, что обработка HTML как строки и замена его частей, как вы делаете, является очень хрупким подходом (например, соответствующий фрагмент текста, часть которого уже выделена жирным шрифтом, или значение атрибута, содержащее сопоставить выделенный текст, например). Вместо этого вы можете использовать встроенный браузер , чтобы найти соответствующий текст . Вот функция из этого вопроса, адаптированная для вашего случая:

function doSearch(text) {
    if (window.find && window.getSelection) {
        document.designMode = "on";
        var sel = window.getSelection();
        sel.collapse(document.body, 0);

        while (window.find(text)) {
            document.execCommand("Bold", false, null);
            sel.collapseToEnd();
        }
        document.designMode = "off";
    } else if (document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        while (textRange.findText(text)) {
            textRange.execCommand("Bold", false, null);
            textRange.collapse(false);
        }
    }
}

Кроме того, функция GetSelected является неправильной (хотя в данном случае она по совпадению работает), так как возвращает строку в IE <9 и объект <code>Selection в других браузерах. Вы также не объявили переменную GetSelected. Вот более простая и лучшая замена:

function GetSelected() {
    var txt = ""
    if (window.getSelection) {
        txt = window.getSelection().toString();
    } else if (document.selection && document.selection.type == "Text") {
        txt = document.selection.createRange().text;
    }
    return txt;
}

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

0 голосов
/ 02 июня 2011

Вместо того, чтобы пытаться найти текст, вам нужно воздействовать на сам выбор.Это будет отличаться в зависимости от браузера:

var t = $("#textarea")[0];
if (t.setSelectionRange)
{
    var selStart = t.selectionStart;
    var selEnd = t.selectionEnd;
    var val = t.value;
    var startVal = val.substring(0, selStart);
    var selectedVal = val.substring(selStart, selEnd);
    var endVal = val.substring(selEnd);
    var bold = selectedVal.bold();
    t.value = startVal + bold + endVal;
}
else if (document.selection && document.selection.createRange)
{
    var selection = document.selection.createRange();
    selection.text = selection.text.bold();
}
0 голосов
/ 02 июня 2011

Чтобы заменить все вхождения, вам нужно использовать /g.Пожалуйста, попробуйте self.html(self.html().replace('/' +selection+'/g', '<b>' + selection + '</b>'));

...