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

【问题标题】：Remove Selected/Highlighted Text using JQuery使用 JQuery 删除选定/突出显示的文本
【发布时间】：2013-09-21 02:27:07
【问题描述】：

我有这个

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

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

【问题讨论】：

标签： jquery

【解决方案1】：

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

我用它来删除文本：

JSFiddle Example

$("#remove").on('click', function (){
if (window.getSelection().toString() != "") {
            selectedText = window.getSelection().toString()
            var text1 = $(".selected").text().split("")
            pointStart = window.getSelection().anchorOffset
            pointEnd = window.getSelection().focusOffset

            if (pointEnd < pointStart) {
                pointStart = pointEnd
            }
            text1.splice(pointStart, selectedText.length);
            text1 = text1.join("")
        } else {
            selectedText = $(".selected").text()
            var text1 = ""
        }
    $(".selected").text(text1)
});

【讨论】：

@buck54321 我知道您很久以前将此标记为答案.. 但接受的答案会引起问题。请查看上述建议

【解决方案2】：

使用移除按钮而不是移除 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();
});

另见this example。

【讨论】：

不客气。不要忘记mark the accepted answers 提出您的所有问题。

【解决方案3】：

在 HTML 中添加一些内容：

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

代码如下：

var getSelected = function(){
  var t = '';
  if(window.getSelection){
    t = window.getSelection();
  }else if(document.getSelection){
    t = document.getSelection();
  }else if(document.selection){
    t = document.selection.createRange().text;
  }
  return t;
};

$('div#remove').click(function(){
    var selection = getSelected();
    var text = $('div[CONTENTEDITABLE=true]').text();
    text = text.replace(selection, '');
    $('div[CONTENTEDITABLE=true]').text(text);
});

http://jsfiddle.net/SBLva/

【讨论】：

@cratsman: 1) 你应该更新 jsfiddle。 2.) 代码将只删除第一次出现的高亮文本。

【解决方案4】：

将div#remove 设为button#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);
});

【讨论】：

@buck54321 是的。它可以防止失去焦点
刚刚意识到这段代码只会删除文本的第一个实例。因此，如果该段文本与 div 中较早出现的文本匹配，则较早的文本将被删除。