Question

当用户选择我的html页面中的任何文本时，我想向其添加自定义样式（如color:red;）。这将作为一个突出显示工具，类似于您在某些应用程序中看到的用于阅读pdf文件的内容。

为此，我宣布highlight()函数获取所选文本及其位置。

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

编辑jsfiddle链接

jsFiddle

Answer 1

请尝试这种方法。基本步骤是获取您的选择，将其传递到getRangeAt方法，然后创建一个新的span元素以包围选择并应用您的类属性。

$(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;
}

的 DEMO

Answer 2

经过一些研究后，我建议采取这种方式。

<强> 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");
});

fiddle

首先在要使用效果的元素中添加class。使用selection选择器和js add以及remove classes后。希望有所帮助：）

使用jquery突出显示所选文本

2 个答案:

的 DEMO