如何在选择之前,之内和之后获取HTML(不在textarea中)？

Question

以下是我要完成的任务:当用户使用鼠标,键盘或触摸来选择"myDiv"中的文本时,我想获取三个谨慎的HTML块:选择之前的HTML(到它的"左侧") ),选择内的HTML,以及选择后的HTML(到它的"右边").html应该与myDiv.innerHTML一样.

选择可能在标记对内开始或结束(即,隔离的选择不一定是有效的HTML).我不需要处理选择中绝对定位元素之类的特殊场景; 我所关注的所有选择都将被限制为一个包含基本标签的div,例如strong,em,ul,ol,h1,image和table.

我最接近的是使用rangy来阻止选择并调用selection.getRangeAt(0).cloneContents()以获得选择HTML.这种方法效果很好,直到我做出一个孤立无效的选择,并且浏览器改变文档片段的HTML以使其成为有效标记.

额外信息:这就是我需要这个的原因:

我正在创建一个文档反馈系统,因此我需要将选择信息保存到数据库中以便以后检索和重构.通常我会使用DOM路径和所选文本保存选择,但文本可能会在保存和重建之间发生变化.例如,作者可能会移动整个段落,删除部分等.然后DOM路径变得毫无用处.

所以我的(不完美)计划是将选择存储为[offset,length,html_snippet].那就是"位置".我还将存储直接在所选文本之前和之后出现的html片段.这是"背景".

使用这些数据的组合,我应该能够在大多数时间重新定位最初选择的文本,即使它已移动或部分更改.当失败时,UI将有办法解决它,但我希望尽可能不频繁地发生.

Superthanks!

Answer 1

我有几个问题：

1.- 当您说“选择后的 html”时，该 html 与选择之前的 html 有什么不同，反之亦然？“选择”过程本身是否因为您的“脚本”或其他原因而篡改了 html？

2.- 您说文本选择没有发生在文本区域中...那么您正在使用哪些元素？段落？div...? 缩小范围会有帮助。

3.- 你考虑过使用jquery吗？

http://api.jquery.com/select/

做类似的事情

$('#element_with_text_goes_here').select(function() {

//apply grabbing functions here, for example

//copy html 'before' selection:
     $pre_html = $('html').clone();

   // copy selection...see below:

   // copy html 'after' selection'...same as before


});

复制选择：

正如这里所指出的：

选择元素中的文本（类似于用鼠标突出显示）

Jason 编写了以下函数：

function selectText(element) {
    var doc = document;
    var text = doc.getElementById(element);    

    if (doc.body.createTextRange) { // ms
        var range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) { // moz, opera, webkit
        var selection = window.getSelection();            
        var range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

可以在这里找到现场工作演示： http://jsfiddle.net/edelman/KcX6A/339/

这里有一个 jquery 插件版本： http ://jsfiddle.net/edelman/KcX6A/340/

您可以使用它来获取所选文本。你只需要相应地调整它，因为他是从相反的角度接近它的。您向我们提供的详细信息越多...我们就能提供更好的帮助。

希望这对
G有帮助