如何在选择之前、内部和之后获取HTML(不在文本区域）

How to get the HTML before, inside, and after a selection (not in textarea)?

本文关键字：HTML 获取 文本 区域 之后 选择 内部      更新时间：2023-09-26

以下是我试图实现的目标：当用户使用鼠标、键盘或触摸来选择"myDiv"中的文本时，我希望获得三个不显眼的HTML块：选择前的HTML（在其"左侧"）、选择内的HTML和选择后的HTML（位于其"右侧"）。html应该与myDiv.innerHTML.一样

选择可能在标签对内开始或结束（即，隔离的选择不一定是有效的HTML）。我不需要处理特殊的场景，比如选择中的绝对定位元素；我关心的所有选择都将被限制在一个div中，该div将包含strong、em、ul、ol、h1、image和table等基本标签。

我最接近的是使用rangy来获取选择，并调用selection.getRangeAt(0).cloneContents()来获取选择HTML。在我做出一个孤立无效的选择，并且浏览器更改文档片段的HTML以使其成为有效标记之前，这种方法一直很有效。

额外信息：以下是我需要这个的原因：

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

因此，我（不完美）的计划是将所选内容存储为[偏移量，长度，html_snippet]。这就是"立场"。我还将存储直接出现在所选文本之前和之后的html片段。这就是"上下文"。

使用这些数据的组合，我应该能够在大多数时候重新定位最初选择的文本，即使它已经移动或部分更改。当失败时，UI将有一种方法来解决它，但我希望这种情况尽可能少发生。

非常感谢！

我有几个问题：

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

2.-你说文本选择不是在文本区域进行的。。。那么你在使用什么元素呢？段落？divs。。。？缩小范围会有所帮助。

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

这段代码从用户的选择中获取html/text，但它只能在IE中工作。该代码也适用于交叉标记选择。（Globals用来保持代码简短。）

<script>
function selected(){
    thediv=document.getElementById('div');
    res=document.getElementById('htm');
    userSelection=document.selection;
    userRange=userSelection.createRange();
    /* For wider scale of elements */
    // rangeParent=userRange.parentElement();
    // if(rangeParent!=thediv) userRange.moveToElementText(rangeParent);
    rangeText=userRange.htmlText;   // OR: rangeText=userRange.text;
    res.innerText=rangeText;    
    return; 
}    
</script>
</head>    
<body onload="document.onselectionchange=selected;">
<div id="div">
<h1>The great testpage</h1>
<p>A paragraph with some text</p>
<p>This paragraph <b>contains</b> a child element.</p>
<p>And this is the last paragraph.</p>
<table>
<tr><td>Cell1-1</td><td>cell1-2</td></tr>
<tr><td>Cell2-1</td><td>cell2-2</td></tr>
</table>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
</div>
<br>
<span id="htm"></span>
</body>

内容在&在thediv中选择后，你会得到这样的结果：prepost=thediv.innerHTML/innerText.split(rangeText);

如果页面包含除thediv之外的任何其他元素，则必须使它们不可选择。

相关文章：