如何突出显示/标记任何文本段落，以便 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>');