如何检索突出显示的文本并在html中显示?

时间:2017-12-07 14:54:05

标签: javascript html

我可以在数据库中插入突出显示的文本。但我不知道如何在html中显示突出显示的文字。

以下是我的HTML代码

<div onmouseup="highlightSelection('yellow')">
 Please select to highlight text with yellow color <div>

以下是我的Javascript代码

<script>  function makeEditableAndHighlight(colour) {
var range, sel = window.getSelection();

if (sel.rangeCount && sel.getRangeAt) {
    range = sel.getRangeAt(0);
}
console.log(range);
document.designMode = "on";
if (range) {
    sel.removeAllRanges();
    sel.addRange(range);
}
// Use HiliteColor since some browsers apply BackColor to the whole block
if (!document.execCommand("HiliteColor", false, colour)) {
    document.execCommand("BackColor", false, colour);
}
document.designMode = "off";}

function highlightSelection(colour) {

var range, sel;
if (window.getSelection) {
    // IE9 and non-IE
    try {
        if (!document.execCommand("BackColor", false, colour)) {
            makeEditableAndHighlight(colour);
        }
    } catch (ex) {
        makeEditableAndHighlight(colour)
    }
} else if (document.selection && document.selection.createRange) {
    // IE <= 8 case
    range = document.selection.createRange();
    range.execCommand("BackColor", false, colour);
}}

下面是我的脚本链接

<script async src="//jsfiddle.net/9ookrny3/embed/"></script>

下面是我的CSS

<style>::selection {
background: yellow;}::-moz-selection { background: yellow;}</style>

0 个答案:

没有答案