如何在文本上“绘制”荧光笔？ [复制]

Posted 2023-03-06

【中文标题】如何在文本上“绘制”荧光笔？ [复制]

【英文标题】：How can I "paint" a highlighter onto text? [duplicate]

【发布时间】：2015-03-27 19:52:13

【问题描述】：

我想让文本在单击拖动时突出显示文本并将突出显示的文本存储在变量中。

我不确定从哪里开始，从我的研究看来，html5 和 canvas 可能是可行的，但我对 html5 不太熟悉，因此非常感谢任何帮助。

【参考方案1】：

$(document).ready(function() 
    $(document).on('click', function() 
        var selection = '';
        if (window.getSelection) 
            selection = window.getSelection().toString();
        
        else if (document.selection) 
            selection = document.selection.createRange().text;
        
        $('.highlighted').append(selection + '<br/>');
    );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
aslkdfjasd thiasldfkjljaslkdjf kasjdlfj lkjasdlkfjl ajsdfll kjlasjdfl laskjdfl lkjasldkfjlakjsdfj;lkjlaksdlfkjl lkjasldkfjl asdfkj jasldjflj asdlkfjalskdjf lkkjasdlklfjlasjdlfkjasdkfjl asdlfjsaf
this is some random text

<br/><br/>
The following text was highlighted:<br/>
<div class="highlighted" style="font-weight:bold;"></div>

【讨论】：

这正是我想要的，谢谢。有没有办法让新突出显示的文本附加到以前突出显示的文本？

@AnthoneyKalasho 使用 .append 而不是 .html。或者从突出显示的 div 中获取原始文本并将其附加到该字符串，然后重置 div 的 html

@AnthoneyKalasho，我编辑以适应追加（并添加了一个换行符，因此它不是一段随机字母哈哈）

@indubitablee 谢谢，你们都帮了很多忙