Блог

Когда пользователь выбирает любой текст на моей HTML-странице, я хочу добавить к нему пользовательский стиль (например color:red; ). Это будет действовать как инструмент выделения, аналогичный тому, что вы можете видеть в некоторых приложениях для чтения файлов pdf.

Для этого я объявляю highlight() функцию, которая получает выделенный текст плюс его позицию.

 function highlight(text, x, y) {
        alert(text '***' x '***' y)
        window.getSelection().removeAllRanges();
    }
  

отредактирована ссылка jsfiddle

jsFiddle

После некоторых исследований я предлагаю пойти этим путем.

HTML

 <h3 class="foo">hello world! hello world! hello world</h3>
<div class="foo">hello world! hello world hello world!</div>
<span class="foo">hello world! hello world</span>
  

css

 .foo::selection {
    color:#ff0099;
}

.bar::selection {
    color: red;   
}
  

js

 $(document).ready(function(){
    $(".foo").removeClass("foo").addClass("bar");
});
  

скрипка

Сначала добавьте a class в свой элемент, который вы хотите использовать эффект. После использования селектора выбора и с js add помощью и remove classes . Надеюсь, это поможет 🙂

Вместо этого попробуйте этот подход. Основные шаги — получить выделенный текст, передать его в метод getRangeAt, а затем создать новый элемент span, чтобы окружить выделенный текст и применить ваш атрибут class.

 $(document).on("mouseup", function (e) {
    var selected = getSelection();
    var range = selected.getRangeAt(0);
    if(selected.toString().length > 1){
        var newNode = document.createElement("span");
        newNode.setAttribute("class", "red");
        range.surroundContents(newNode);       
    }
    selected.removeAllRanges();
 });

function getSelection() {
    var seltxt = '';
     if (window.getSelection) { 
         seltxt = window.getSelection(); 
     } else if (document.getSelection) { 
         seltxt = document.getSelection(); 
     } else if (document.selection) { 
         seltxt = document.selection.createRange().text; 
     }
    else return;
    return seltxt;
}
  

ДЕМОНСТРАЦИЯ