Выберите текст и добавьте к нему тег

Question

Есть много вопросов по этой теме на SO, но я не могу найти решения для своей проблемы, поэтому я решил задать свой вопрос. Моя ситуация: у меня есть раскрывающийся список с несколькими опциями и текстовое поле внутри iframe. Когда пользователь выбирает какой-либо текст в текстовом поле и выбирает один из раскрывающегося списка, тогда выделенный текст будет содержать обертку тега a, а значение параметра станет тегом href. Вот мой код:

var optionTag  = document.getElementById("option-id"); 
    var optionValue  = optionTag.options[optionTag.selectedIndex].value; 
    var iframe   = document.getElementById("my-frame"); 
    var iframeContent = iframe.contentDocument.body.innerHTML.split("<br>")[0]; 

    //get user selected text 
    var iframeSelection = iframe.contentWindow.getSelection().toString(); 

    // and wrap a tag around it then add href equal to value of option 
    var aTag  = "<a href=\"" + optionValue + "\">" + iframeSelection +"</a>"; 

    // replace user selected text with new a tag 
    iframe.contentDocument.body.innerHTML = iframeContent.replace(iframeSelection,aTag) 

Этот код работы но только заменить первое слово, если это слово уже существует. Например:

lorem ipsum click dolor sit amet click spum 

Если пользователь выбирает второе слово «нажмите» и выберите один из вариантов, то мой код будет заменить только первое слово «нажмите», и если у меня есть несколько слов «нажмите» это еще только заменить первое слово, но если пользователь выбирает слово «ipsum» или «lorem», тогда он работает нормально. Я не знаю, как это исправить, пожалуйста, помогите. Спасибо!

p/s: Я не хочу заменять все слова «щелчок», я хочу только выбрать точный элемент.

Answer 1

Проблема в том, что Javascript String.replace() работает только так, как вы ожидаете, когда используете его с шаблоном RegExp с установленным глобальным флагом. К счастью, this answer имеет хорошее решение.

Изменить это:

iframe.contentDocument.body.innerHTML = iframeContent.replace(iframeSelection,aTag); 

... в этом:

iframe.contentDocument.body.innerHTML = iframeContent.replace(new RegExp(iframeSelection, 'g'), aTag); 

Что она делает это, что он преобразует строку поиска в объект RegExp с глобальным флагом, поэтому каждое вхождение заменяется.

Если было сделано только для того, чтобы заменить только то, что выбрал пользователь, он становится более сложным, но вы можете найти все необходимые бит от this answer.

Answer 2

Проблема заключается в том, что iframeSelection в вашем вызове replace() является «щелчком», а не выбранным вами элементом, поэтому он заменяет первое появление.

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

var selection = iframe.contentWindow.getSelection(); 
range = selection.getRangeAt(0); 
range.deleteContents(); 
range.insertNode(document.createElement(your_new_element)); 

Я не смог протестировать без вашего HTML, JSFiddle поможет.