如何在选择之前，之内和之后获取HTML（不在textarea中）？ [英] How to get the HTML before, inside, and after a selection (not in textarea)?

问题描述

以下是我想要完成的工作：当用户使用鼠标，键盘或触摸选择myDiv中的文本时，我想要获取三个谨慎的HTML块：选择之前的HTML（到左侧），选择内的HTML以及选择后的HTML（到它的正确）。 html应该和myDiv.innerHTML一样。

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

我最近来的是使用 rangy 来阻止选择并调用 selection.getRangeAt（0）.cloneContents（）来获取选择的HTML。这足够好，直到我做出一个无效的选择，并且浏览器改变文档片段的HTML以使其成为有效的标记。

额外信息：这就是为什么我需要这个：

我正在创建一个文档反馈系统，所以我需要将选择信息保存到数据库以供日后检索和重建。通常我会使用DOM路径和选定的文本保存选择，但文本可能会在保存和重构之间更改。例如，作者可能会移动整个段落，删除段落等等。然后，DOM路径变得毫无用处。

所以我的（不完美的）计划是存储选择作为[偏移量，长度，html_snippet]。这是职位。我还会存储所选文本前后的html代码片段。这是上下文。

使用这些数据的组合，我应该能够在大部分时间重新定位最初选择的文本，即使它已经移动或部分移动改变。如果失败了，UI将有办法解决它，但我希望尽可能少发生。

Superthanks！

解决方案

我有几个问题：

1.-当你说'选择' - 该html如何与选择之前的html不同？或者反之亦然？ 选择过程本身是否会因为'脚本'或其他原因而篡改html？

2.-你说文本选择不在textareas中发生......那么你在处理什么元素？段落？ div的...？缩小它会有帮助。

3.-您是否想过使用jquery？

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

做类似于

的事情

  $（'＃element_with_text_goes_here'）。select（function（）{
 
 //在这里应用抓取函数，例如
 
 //在选择之前复制html'：
 $ pre_html = $（'html'）。clone（）; 
 
 //复制选择...见下面：
 
 //在'选择'后复制html'...与之前相同
 
 
}） ; 
  

复制选择：

：

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）; 
 
 
 $ / code> 

有了一个可以在这里找到的实时工作演示：
http://jsfiddle.net/edelman/KcX6A/339/

以及一个jquery插件版本：
http://jsfiddle.net/edelman/KcX6A/340/

您可以使用它来获取选定的文本。你必须相应地调整它，因为他是从一个相反的角度接近它。
您可以给我们的更多细节......我们可以提供更好的帮助。

希望这有助于

G

Here is what I am trying to accomplish: When a user uses a mouse, keyboard, or touch to select text inside "myDiv" I want to acquire three discreet chunks of HTML: the HTML before the selection (to the "left" of it), the HTML inside the selection, and the HTML after the selection (to the "right" of it). The html should be as it would appear with myDiv.innerHTML.

The selection might start or end inside a tag pair (i.e., the isolated selection isn't necessarily valid HTML). I don't need to deal with special scenarios like absolute-positioned elements within the selection; all of the selections I am concerned with will be constrained to one div that will contain basic tags like strong, em, ul, ol, h1, image, and table.

The closest I've come is using rangy to snag the selection and calling selection.getRangeAt(0).cloneContents() to get the selection HTML. This works well enough until I make a selection that is invalid in isolation, and the browser alters the HTML of the document fragment to make it valid markup.

Extra Information: Here's why I need this:

I am creating a document feedback system, so I need to save the selection information to a database for later retrieval and reconstitution. Normally I would save the selection using the DOM path and the selected text, but the text may change between saving and reconstitution. For example, the author might move entire paragraphs around, delete sections, etc. The DOM path becomes pretty useless then.

So my (imperfect) plan is to store the selection as [offset, length, html_snippet]. That's the "position". I'll also store the html snippets that came directly before and after the selected text. This is the "context".

Using a combination of these data I should be able to relocate the originally selected text most of the time, even if it has moved or partially changed. When that fails, the UI will have a way to address it, but I'd like that to occur as infrequently as possible.

Superthanks!

解决方案

I have several questions:

1.- When you say 'the html after the selection' - how would that html be any different than the html previous to the selection or viceversa? Is the 'selection' process itself tampering with the html because of your 'script' or whatever?

2.- You said the text selections are not taking place in textareas...what elements are you working with then? paragraphs? divs...? Narrowing it down would help.

3.- Have you thought about using jquery?

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

Doing something like

$('#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


});

Copy selection:

As noted here:

Selecting text in an element (akin to highlighting with your mouse)

Jason wrote the following function:

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

With a live working demo that can be found here: http://jsfiddle.net/edelman/KcX6A/339/

And a jquery plugin version here: http://jsfiddle.net/edelman/KcX6A/340/

Which you can use for the obtention of the selected text. You'll just have to tweak it accordingly since he was approaching it from a reversed angle. The more details you can give us...the better we can help.

Hope this helps
G

这篇关于如何在选择之前，之内和之后获取HTML（不在textarea中）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！