How to highlight/mark any text passages, so that javascript can change it?

Question

To be a bit more specific: A user should be able to highlight text, so that Javascript could replace this highlighted part with a text-area. My problem is, that i don't know how to edit any part of the text!

I hope my example drawing helps to understand my very specific question!

Answer 1

I have built a little script in JSFiddle here is the link: 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>');