Изменение цвета выделенного текста в HTML

Question

Я хочу выделить функцию, которая изменит цвет выделенного текста с помощью Javascript. Я использую следующий метод.

function android_selection_highlight(replacrmenthtml){ 
    try { 
     if (window.getSelection) { 
      sel = window.getSelection(); 
      var range = sel.getRangeAt(0); 

      var selectionStart = $("<span style=\"color:red\">"); 
      var startRange = document.createRange(); 
      startRange.setStart(range.startContainer, range.startOffset); 


      var selectionEnd = $("</span>"); 
      var endRange = document.createRange(); 
      endRange.setStart(range.endContainer, range.endOffset); 

      startRange.insertNode(selectionStart[0]); 
      endRange.insertNode(selectionEnd[0]); 
     } 
    } 
    catch (e) { 

    } 
} 

Но это дает исключение DOM, когда я вызываю метод. Я думаю, что когда я вставляю начальный тег span перед выбранным текстом, он нарушает структуру DOM, так как в этот момент нет конечного тега. Как решить эту проблему?

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

Answer 1

Я знаю, что это вопрос JS, но есть селектор CSS, который позволяет вам это делать.

::selection { 
    color: red; 
} 

Если браузер считает, что вы сделали выбор, который недоступен, он может переопределить ваши цвета. Не все может быть оформлено таким образом, но цвета и цвета фона могут.

Дополнительная информация:

• ::selection on CSS Tricks
• ::selection on MDN

Answer 2

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

::-moz-selection { color: red;} 
    ::selection { color: red; }