Javascript:如何在所选文本范围外获取文本

时间:2022-10-31 11:48:48

I know how to get the text from selected range through:

我知道如何通过以下方式获取所选范围内的文本:

if (elem.getSelection) {
        sel = elem.getSelection();
        if (sel.rangeCount) {
             selectedText=sel.getRangeAt(0);
        }
    } else if (elem.selection) {
        selectedText=elem.selection.createRange();
    }

Question - how can I get the text before selected range and after? Thanks in advance.

问题 - 如何在选定范围之前和之后获取文本?提前致谢。

3 个解决方案

#1


1  

Here's a function to do this using DOM Range in most browsers and TextRange in IE < 9.

这是在大多数浏览器中使用DOM Range和在IE <9中使用TextRange执行此操作的函数。

Live demo: http://jsfiddle.net/bVpqR/

现场演示:http://jsfiddle.net/bVpqR/

Code:

码:

function getUnselectedText(containerEl) {
    var sel, range, tempRange, before = "", after = "";
    if (typeof window.getSelection != "undefined") {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
        } else {
            range = document.createRange();
            range.collapse(true);
        }
        tempRange = document.createRange();
        tempRange.selectNodeContents(containerEl);
        tempRange.setEnd(range.startContainer, range.startOffset);
        before = tempRange.toString();

        tempRange.selectNodeContents(containerEl);
        tempRange.setStart(range.endContainer, range.endOffset);
        after = tempRange.toString();

        tempRange.detach();
    } else if ( (sel = document.selection) && sel.type != "Control") {
        range = sel.createRange();
        tempRange = document.body.createTextRange();
        tempRange.moveToElementText(containerEl);
        tempRange.setEndPoint("EndToStart", range);
        before = tempRange.text;

        tempRange.moveToElementText(containerEl);
        tempRange.setEndPoint("StartToEnd", range);
        after = tempRange.text;
    }
    return {
        before: before,
        after: after
    };
}

#2


0  

I'm not sure why you would want to know the string preceding the selection and the string ensuing it. Basically those two strings together will be your entire page minus your selection.

我不确定你为什么要知道选择前的字符串和随之而来的字符串。基本上这两个字符串将是你的整个页面减去你的选择。

Here's a nice introduction to ranges: http://www.quirksmode.org/dom/range_intro.html

以下是对范围的精彩介绍:http://www.quirksmode.org/dom/range_intro.html

#3


0  

From the top of my head, you should add validations incase selected text is in either sides: Let us say that elem is a textbox:

从我的头脑中,您应该添加验证,选择文本在任何一侧:让我们说elem是一个文本框:

if (elem.getSelection) {
        sel = elem.getSelection();
        if (sel.rangeCount) {
             selectedText=sel.getRangeAt(0);
        }
    } else if (elem.selection) {
        selectedText=elem.selection.createRange();
    }


var texts = elem.value.split(selectedText);
var before = texts[0];
var after = texts[2];

OR

要么

var text = element.value;
var before = text.substring(0,text.indexOf(selectedText));
var after = text.replace(before + selectedtext,''); // or after = text.substring(before.length + selectedText.length);

#1


1  

Here's a function to do this using DOM Range in most browsers and TextRange in IE < 9.

这是在大多数浏览器中使用DOM Range和在IE <9中使用TextRange执行此操作的函数。

Live demo: http://jsfiddle.net/bVpqR/

现场演示:http://jsfiddle.net/bVpqR/

Code:

码:

function getUnselectedText(containerEl) {
    var sel, range, tempRange, before = "", after = "";
    if (typeof window.getSelection != "undefined") {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
        } else {
            range = document.createRange();
            range.collapse(true);
        }
        tempRange = document.createRange();
        tempRange.selectNodeContents(containerEl);
        tempRange.setEnd(range.startContainer, range.startOffset);
        before = tempRange.toString();

        tempRange.selectNodeContents(containerEl);
        tempRange.setStart(range.endContainer, range.endOffset);
        after = tempRange.toString();

        tempRange.detach();
    } else if ( (sel = document.selection) && sel.type != "Control") {
        range = sel.createRange();
        tempRange = document.body.createTextRange();
        tempRange.moveToElementText(containerEl);
        tempRange.setEndPoint("EndToStart", range);
        before = tempRange.text;

        tempRange.moveToElementText(containerEl);
        tempRange.setEndPoint("StartToEnd", range);
        after = tempRange.text;
    }
    return {
        before: before,
        after: after
    };
}

#2


0  

I'm not sure why you would want to know the string preceding the selection and the string ensuing it. Basically those two strings together will be your entire page minus your selection.

我不确定你为什么要知道选择前的字符串和随之而来的字符串。基本上这两个字符串将是你的整个页面减去你的选择。

Here's a nice introduction to ranges: http://www.quirksmode.org/dom/range_intro.html

以下是对范围的精彩介绍:http://www.quirksmode.org/dom/range_intro.html

#3


0  

From the top of my head, you should add validations incase selected text is in either sides: Let us say that elem is a textbox:

从我的头脑中,您应该添加验证,选择文本在任何一侧:让我们说elem是一个文本框:

if (elem.getSelection) {
        sel = elem.getSelection();
        if (sel.rangeCount) {
             selectedText=sel.getRangeAt(0);
        }
    } else if (elem.selection) {
        selectedText=elem.selection.createRange();
    }


var texts = elem.value.split(selectedText);
var before = texts[0];
var after = texts[2];

OR

要么

var text = element.value;
var before = text.substring(0,text.indexOf(selectedText));
var after = text.replace(before + selectedtext,''); // or after = text.substring(before.length + selectedText.length);