Question

我有这个

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

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

Answer 1

使用删除按钮而不是remove-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。

Answer 2

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

我用它来删除文字：

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)
});

Answer 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/

Answer 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);
});

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

4 个答案: