动态注释HTML？

Question

对于Internet Explorer和Firefox,我想在ASP.NET页面中执行以下操作:

1. 在窗口中显示上载的HTML文档.
2. 允许用户使用标准文本光标突出显示任意部分,然后按"在此处留言"按钮.
3. 保存突出显示的确切起点和终点 - 而不仅仅是突出显示内容 - 并将它们与唯一ID相关联.
4. 通过覆盖<span class ="highlight">标记突出显示起点和终点之间的所有内容.

1和2都没问题.但对于3和4 ......这可能吗？如果是这样,我该怎么办呢？

如果对HTML文档无法做到这一点,纯文本怎么样？(对于HTML,我们可以假设它相对简单.例如,我设想这个支持word文档保存为HTML.)

Answer 1

那你有问题.

假设这个文字:

Hello my
name is
Josh and
this is an
example for you

下面是这样的:

<span>
  Hello my
  <span>
    name is<br/>
    Josh and
  </span>
  <span>
    this is an<br/>
    example for you
  </span>
</span>

然后假设我选择:

Josh and
this is an

我选择的HTML是:

  Josh and
</span>
<span>
  this is an

因此,如果你绕过它,你最终会得到一些搞砸的HTML.

所以,我建议如下:

• 使用javascript获取所选文本
• 从所选文本中删除HTML标记

你最终得到这个:

function getSelectedTextNoHtml() {
    return getSelectedText().replace(/(<([^>]+)>)/ig, "");
}

function getSelectedText() {
    if (window.getSelection)
        return window.getSelection();
    else if (document.getSelection)
        return document.getSelection();
    else if (document.selection)
        return document.selection.createRange().text;
    return "";
}

然后,您可以获取整个文档的HTML,剥离HTML标记并在文档的文本版本中查找所选文本的索引.

我甚至可以想到(丑陋但可行)的方法来获取HTML中的选择索引.但我警告你,如果你想要他们,他们就是丑陋的.

有甚至很丑陋的方式来获得一个跨度整齐地围绕你想要的唯一ID选定的文本.当然,总有办法做点什么.一切都只是一个算法.但这将涉及一个美好的日子工作磨练它!

我发布的很多,如果你想让我详细说明,请问!

更新:

好的,你问过它:)

• 获取所选文本并将其记录在某处
• 暂时用完全唯一的东西替换所选文本
• 找到完全唯一文本的索引
• 更改文本

如果你想在没有文字闪烁和改变的情况下谨慎地做到这一点,你可以尝试利用HTML零宽度空间:

​

坚持在它前面100次,找到100个零宽度空间的索引!

当然,如果他们的文档在其他地方有100个零宽度空格和所选文本,它将失败,但此时我说"让它失败":)

Howzat？