在光标位置拆分div内容

Question

我需要在用户点击它之后拆分元素,并且attr'contenteditable'变为'true'.这个小提琴适用于第一段,但不适用于第二段,因为后者属于ap标签.类似的在这个小提琴中,你会看到当元素中有html标签时,计数器会失去准确性,因此光标前后的文本不是你所期望的.

这里假设用户将以帮助标签保持不变的方式拆分数据.正如dandavis在这里指出的那样,例如div有<i>Hello</i> <b>Wo*rld</b>,用户只需要将div分成两个div,第一个将有<i>Hello</i>,第二个div将<b>Wo*rld</b>在其中.

HTML:

<div><mark>{DATE}</mark><i>via email: </i><mark><i>{EMAIL- BROKER OR TENANT}</i></mark></div>

JS:

var $splitbut = $('<p class="split-but">Split</p>');
$(this).attr('contenteditable', 'true').addClass('editing').append($splitbut);

var userSelection;
if (window.getSelection) {
    userSelection = window.getSelection();
}
var start = userSelection.anchorOffset;
var end = userSelection.focusOffset;

var before = $(this).html().substr(0, start);
var after = $(this).html().substr(start, $(this).html().length);

"拆分"按钮不起作用,因为一旦我得到正确的"之后"和"之前"文本,生成html不是问题.关于我在这里做错了什么想法？

Answer 1

像这样的东西可能适用于您描述的具体情况

$('div, textarea').on('click', function(e) {
 var userSelection;
    if (window.getSelection) {
        userSelection = window.getSelection();
    }
    var start = userSelection.anchorOffset,
        end = userSelection.focusOffset,
        node = userSelection.anchorNode,
        allText = $(this).text(),
        nodeText = $(node).text();

// before and after inside node
  var nodeBefore = nodeText.substr(0, start);
  var nodeAfter = nodeText.substr(start, nodeText.length);

// before and after for whole of text
    var allExceptNode = allText.split(nodeText),
        before = allExceptNode[0] + nodeBefore,
        after = nodeAfter + allExceptNode[1];

  console.log('Before: ', before);
  console.log('------');
  console.log('After: ', after);

});

更新了演示https://jsfiddle.net/gaby/vaLz55fv/10/

如果标签的内容在整个文本中重复，则可能会出现问题。（由于分裂造成的问题）