如何突出显示/标记任何文本段落，以便javascript可以更改它？

Question

更具体一点：用户应该能够突出显示文本，以便Javascript可以用文本区域替换此突出显示的部分。我的问题是，我不知道如何编辑文本的任何部分！

我希望我的示例绘图有助于理解我非常具体的问题！

Answer 1

我在JSFiddle中构建了一个小脚本，这里是链接：http://jsfiddle.net/WT5XE/2/

<强> JS

var textB = ''; // text before split
var textA = ''; // text after split

...

// here starts the magic, split current text and insert a new input box
var splitted = that.innerHTML.split(text);
textB = splitted[0];
textA = splitted[1];

$('#text').empty();
// Append the text before in a new span
$('#text').append('<span>'+textB+'</span>');
// Create the input box and attach key listener (on enter it will terminate and set the new text)
$('<input value="'+text+'">')
    .keypress(function (e) {
        if (e.which == 13) {
            isInput = false;
            var newText = this.value;
            var text = textB+newText+textA;
            $('#text').empty();
            $('#text').append(text);
            return false;
        }
    })
    .appendTo('#text');
// Append the text after in a new span
$('#text').append('<span>'+textA+'</span>');