跨浏览器javascript从用户处获取并替换准确的HTML'；谁的选择？

我正在寻找一种使用javascript或JQuery从用户所选范围获取、修改和替换HTML的方法。基本上，假设用户在一些HTML标记上选择一个范围（描述选择）：

这是要选择的一些文本的示例

我将如何获得：

of</b> some text

某些文本的

然后，在运行一些代码对该文本进行修改之后：

of some</b> altered text

一些修改过的文本的

如何将其重新插入，使最终版本显示：

<p>This is an <b>example of some</b> altered text to be selected</p>

这是要选择的一些更改文本的示例

---

我无法解决这两个问题，即查找某个区域的确切html，或将特定的修改html写入某个区域。

我认为实现这一点的一种方法是：

获取DOM中包含整个元素的最高元素 挑选

解析所选内容的innerHTML（请不要使用正则表达式）

显示匹配项并记住其位置和元素，以便重新插入编辑过的版本

虽然我认为第3步可能无法实际更改布局。希望会有更简单的解决方案。

这是我的开始：

它将用输入值替换选定的文本

但它没有考虑html

有什么想法吗

$('#content').on('mouseup',function() {

    var t = false;

    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }

    if (t && (t+'').length > 0) {

       $('#content').html($('#content').html().replace(t,$('input').val()))

        alert("You replaced:\n" + t + "\nwith:\n" + $('input').val());
    }

});​

---

下面是我的看法，就像iambriansreed的版本一样，它不考虑HTML，您将在示例中看到：

以下是重要的代码：

var s = window.getSelection();
var ss = s.toString();
var node = $(s.getRangeAt(0).startContainer).parent();
var contents = node.text();
var idx = contents.indexOf( ss );
node.html( contents.substr( 0, idx ) + 
    "HELLO" + 
    contents.substr( idx+ss.length ) );

---

我偏离了你的文本选择想法，做了一个基于鼠标悬停和高亮显示的解决方案。不是你的确切要求，但它实现了你的基本目标。还有很大的改进空间

例如：

JS

注意：无论出于什么原因，我没有拾取新元素，所以我需要在编辑后重新绑定它们

HTML

---

您是否正在尝试将更改后的文本重新插入到它所取自的同一文档中？是的，这是正确的。修改后的文本将返回到同一文档中，替换选定的文本。修改后的文本将从何处来替换选定的文本？我只需在代码中修改文本，类似于：function（）{var html=getSelectionHTML（）；html=transformHTML（html）；replacethtml（html）；}我需要弄清楚的是getSelectionHTML（）和replaceHTML（）函数是如何工作的。我们计划在HTML上执行什么样的转换？对于你的#2-是的，我也在想同样的事情，只需记住它的位置并将其向后插入这在大多数情况下都有效，除非所选内容的文本在父DOM元素中多次出现。在这种情况下，我如何判断哪个实例需要替换？@BrandonBoone我听说RegEx很可怕，我讨厌自己去碰它。不幸的是，到目前为止，我所读到的只是人们讨论为什么不使用它，但没有关于如何在JS中正确使用它的实际教程。（我承认我也没有主动搜索过，因为幸运的是我很少需要这些东西）。欢迎建议：-）@Armatus我也同意，我听说不使用它，但从来没有听说过任何替代。这种跨浏览器友好吗？它只是一个概念证明和正确方向的开始。我敢肯定它对跨浏览器不友好。

var s = window.getSelection();
var ss = s.toString();
var node = $(s.getRangeAt(0).startContainer).parent();
var contents = node.text();
var idx = contents.indexOf( ss );
node.html( contents.substr( 0, idx ) + 
    "HELLO" + 
    contents.substr( idx+ss.length ) );

var $txtArea = $('textarea'); 

function Rebind(){
    $('#editable *').off('mouseover.editor').on('mouseover.editor',function() {
        $(this).addClass('highlight');
        return false; 
    }).off('mouseout.editor').on('mouseout.editor',function() {
        $(this).removeClass('highlight');
        return false; 
    }).off('click.editor').on('click.editor',function() {
        var $sel = $('.highlight'); 
        $txtArea.val($sel.html()).data('selected', $sel);
    });
}
Rebind();
$('input').click(function(){
    $txtArea.data('selected').html($txtArea.val()); 
    Rebind();
}); 
​

<div id='editable'>
    <div>
        This is <br /> some <b>content</b>
        <div>testing</div>
        <div> 
            some <i>more content</i>
            <div>eidt me</div>
        </div>
    </div>
</div>

<textarea ></textarea>
<input type="button" value="save" /> ​

textarea{
 height:150px;
 width:100%;    
}

.highlight
{
    border:1px solid blue !important;
}