0

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

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

我将如何获得：

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 写入范围。

4

4 回答 4

0

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

示例：jsFiddle

JS

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

注意：无论出于何种原因， jQueryon没有选择新元素，所以我需要在编辑后重新绑定它们。

HTML

<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" /> ​

CSS

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

.highlight
{
    border:1px solid blue !important;
}
于 2012-04-11T15:59:58.527 回答
0

这是我的开始：

jsFiddle

它用输入的值替换选择的文本。

它虽然没有考虑到 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());
    }

});​
于 2012-04-10T21:09:17.213 回答
-1

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

  1. 获取 DOM 中包含整个选择的最高元素
  2. 解析其 innerHTML 以供选择（请不要使用正则表达式）
  3. 显示匹配并记住它的位置和插入编辑版本的元素

尽管我的第 3 步可能无法实际更改布局。希望应该有更简单的解决方案。

于 2012-04-10T20:50:58.400 回答
-1

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

jsFiddle

这是重要的代码：

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 ) );
于 2012-04-10T21:16:19.660 回答