使用JQuery删除选定/突出显示的文本

我有这个

<div id="remove"></div>
<div CONTENTEDITABLE="true"></div>

---

如果用户突出显示contenteditable div中的文本并单击remove div，我想删除该文本

向HTML添加一些内容：

<div id="remove"><a href="#">Remove</a></div>
<div CONTENTEDITABLE="true">Hello World! This is a test text.</div>

---

向HTML添加一些内容：

<div id="remove"><a href="#">Remove</a></div>
<div CONTENTEDITABLE="true">Hello World! This is a test text.</div>

使

div#删除
至
按钮#删除

function getSelectedText() {
        return window.getSelection ? window.getSelection() // ie9 or above
                                    : document.selection.createRange().text; // earliar ie9
    }
$('#remove').click(function() {
    var curText = $('#editable').text(),
    selObj = getSelectedText(),
    selText = selObj.toString();
    var newTxt = '';
    for (var i = 0; i < curText.length; i++) {
        if (i < selObj.anchorOffset || i >= (selObj.anchorOffset + selText.length)) {
            newTxt += curText[i];
        }
    }
    $('#editable').text(newTxt);
});

函数getSelectedText（）{
return window.getSelection？window.getSelection（）//ie9或更高版本
：document.selection.createRange（）.text；//早期ie9
}
$（“#删除”）。单击（函数（）{
var curText=$（“#可编辑”）.text（），
selObj=getSelectedText（），
selText=selObj.toString（）；
var newText=''；
对于（变量i=0；i=（selObj.anchorOffset+selText.length））{
newtext+=curText[i]；
}
}
$（“#可编辑”）.text（newText）；
});
make
div#remove
至
按钮#remove

function getSelectedText() {
        return window.getSelection ? window.getSelection() // ie9 or above
                                    : document.selection.createRange().text; // earliar ie9
    }
$('#remove').click(function() {
    var curText = $('#editable').text(),
    selObj = getSelectedText(),
    selText = selObj.toString();
    var newTxt = '';
    for (var i = 0; i < curText.length; i++) {
        if (i < selObj.anchorOffset || i >= (selObj.anchorOffset + selText.length)) {
            newTxt += curText[i];
        }
    }
    $('#editable').text(newTxt);
});

函数getSelectedText（）{
return window.getSelection？window.getSelection（）//ie9或更高版本
：document.selection.createRange（）.text；//早期ie9
}
$（“#删除”）。单击（函数（）{
var curText=$（“#可编辑”）.text（），
selObj=getSelectedText（），
selText=selObj.toString（）；
var newText=''；
对于（变量i=0；i=（selObj.anchorOffset+selText.length））{
newtext+=curText[i]；
}
}
$（“#可编辑”）.text（newText）；
});

使用移除按钮而不是移除div:

function removeSelectedText () {
    if (window.getSelection || document.getSelection) {
        var oSelection = (window.getSelection ? window : document).getSelection();
        $('#text').text(
            $('#text').text().substr(0, oSelection.anchorOffset)
            + $('#text').text().substr(oSelection.focusOffset)
        );
    } else {
        document.selection.clear();
    }
}

$('#remove').click(function() {
    removeSelectedText();
});

---

另请参见。

使用移除按钮而不是移除div：

function removeSelectedText () {
    if (window.getSelection || document.getSelection) {
        var oSelection = (window.getSelection ? window : document).getSelection();
        $('#text').text(
            $('#text').text().substr(0, oSelection.anchorOffset)
            + $('#text').text().substr(oSelection.focusOffset)
        );
    } else {
        document.selection.clear();
    }
}

$('#remove').click(function() {
    removeSelectedText();
});

---

另请参见。

如果从左到右突出显示一个字符，则接受的答案无效

我使用此选项删除文本：

$（“#删除”）。在（'click'，函数（）{
if（window.getSelection（）.toString（）！=“”）{
selectedText=window.getSelection（）.toString（）
var text1=$（“.selected”）.text（）.split（“”）
pointStart=window.getSelection（）.anchorOffset
pointEnd=window.getSelection（）.focusOffset
如果（点结束<点开始）{
点开始=点结束
}
text1.拼接（pointStart，selectedText.length）；
text1=text1.join（“”）
}否则{
selectedText=$（“.selected”）.text（）
var text1=“”
}
$（“.selected”）.text（text1）
});

如果从左到右突出显示一个字符，则接受的答案不起作用

我使用此选项删除文本：

$（“#删除”）。在（'click'，函数（）{
if（window.getSelection（）.toString（）！=“”）{
selectedText=window.getSelection（）.toString（）
var text1=$（“.selected”）.text（）.split（“”）
pointStart=window.getSelection（）.anchorOffset
pointEnd=window.getSelection（）.focusOffset
如果（点结束<点开始）{
点开始=点结束
}
text1.拼接（pointStart，selectedText.length）；
text1=text1.join（“”）
}否则{
selectedText=$（“.selected”）.text（）
var text1=“”
}
$（“.selected”）.text（text1）
});

@buck54321是的。它可以防止焦点丢失。我们刚刚意识到，这段代码将只删除文本的第一个实例。因此，如果该段文本与div中较早出现的文本匹配，则较早的文本将被删除。@buck54321是的。它可以防止焦点丢失。我们刚刚意识到，这段代码将只删除文本的第一个实例。因此，如果该段文本与div中较早出现的文本匹配，则较早的文本将被删除。@cratsman:1）您应该更新JSFIDLE。2.）代码将只删除第一次出现的高亮文本。@cratsman:1）您应该更新JSFIDLE。2.）代码将只删除高亮显示文本的第一个匹配项。不客气。别忘了回答你所有的问题。不客气。不要忘记回答你所有的问题。@buck54321我知道你很久以前就把这个标记为答案了。。但被接受的答案会引起问题。请检查以上内容suggestion@buck54321我知道你很久以前就把这个作为答案了。。但被接受的答案会引起问题。请审查上述建议