Сделать правильное выделение части слова в предложении

Привет, друзья!

Помогите пожалуйста сделать правильное выделение части слова в предложении. Дело в том, что если в предложении несколько раз встречается то буквосочетание, что нужно выделить, то выделяется только первое из них, а мне нужно, чтобы выделялось именно то буквосочетание, что было выделено курсором мышки!

вот здесь https://langguard.com/student-account/courses/1/22 (курсы - курс фонетич тренажер - Ударения в предложениях) Ubung 2 (Упражнение 2)

логин test_student777
пароль 777student

во 2м задании упражнения 2 выделите мышкой все последние буквосочетания "an"
Wir fangen an. Wir fangen heute an. Wir fangen heute um 9 an. Вот они и должны выделятся рамкой! А выделяются первые встрачаемые буквосочетания an потому как в словах несколько таких буквосочетаний. А когда нажимаешь кнопку Выполнить - упражнение отправляется на проверку и после проверки (если выбраны были правильные буквосочетания) рамкой выделяются все бувосочетания an, что присутствуют в предложении, а нужно, чтобы выделялись только буквосочетания в той позиции текста, где они были выбраны мышкой!

Я так понимаю, нужно передавать еще переменную со СМЕЩЕНИЕМ и ДЛИНОЙ ВЫДЕЛЕНОГО ТЕКСТА, в которой произв выделение. Но КАК НАЙТИ СМЕЩЕНИЕ!?


вот js при помощи которого мышкой делается выделение текста (замена делается при пом .replace()) в рамку и запись выделеного значения в input[type="hidden"]
Код:
// Обрабатываем SELECTABLE слова
$('form[name="exercise_form"] .is_selectable_word_area').each(function() {
    var $this = $(this);


    $this.bind('mouseup', function(e) {
      var block_text = $this.text();
      var attr_InputName = $this.attr('data-input');
      var selection;

      if (window.getSelection) {
        selection = window.getSelection();
      } else if (document.selection) {
        selection = document.selection.createRange();
      }

      if (selection.toString()!='') {
        var selected_text = selection.toString();

        // ВОТ ОНА ЗАМЕНА ТЕКСТА ДЛЯ ВСТАВКИ В УПРАЖНЕНИЕ , ЕСЛИ СТУДЕНТ ВЫДЕЛИЛ ТЕКСТ МЫШКОЙ! Тут и нужно правильно производить замену ...
 
        var repl_text = block_text.replace(
          selected_text, '<span class="s_area">'+selected_text+'</span>'
        );
        $this.html(repl_text);


        $this.attr('data-input-value',selected_text);
        $('input[name="'+attr_InputName+'"]').val(selected_text);

        //console.log('"' + selected_text + '" was selected; text: '+block_text+', input name: '+attr_InputName);
      }
     
    });
});
а вот PHP код (замена делается при пом str_replace()), что отвечает за подмену текста и выделение текста рамкой, если был выбран правильные вариант
PHP:
if (isset($options['value'])) {
  $s_value = $i_value =  $options['value'];
$word = str_replace($options['value'], '<span class="s_area">'.$options['value'].'</span>', $word);
}
 
Последнее редактирование:
Сверху