HTML中所选文本的颜色更改

dev*_*oid 0 html javascript css getselection

我想突出显示使用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) {

    }
}
Run Code Online (Sandbox Code Playgroud)

但是当我调用方法时它会给出DOM异常.我认为当我在所选文本前面插入起始span标记时,它会破坏DOM结构,因为那时没有结束标记.如何解决这个问题呢?

编辑:会有一个高亮显示按钮.选择文本,如果用户单击突出显示按钮,则所选文本的文本颜色将更改.

Sha*_*ari 6

如果选择你想改变颜色使用此代码.

    ::-moz-selection { color: red;}
    ::selection { color: red; }
Run Code Online (Sandbox Code Playgroud)