Question

I have a editable div:

<div id="artikel" contenteditable="true"></div>

It works nice, I can edit it on the fly by just typing in it.

What I now want is to search in the text typed in, just when they lift a key:

<script>
$(document).ready(function(){
    $("#artikel").live("keyup", function(e)
    {
        var text = $(this).html();
        console.log(text);
    });
});
</script>

This is all working.

The question is, when I have this text:

Sampele text with the same words in the text.

How to only replace the first “text” word and not the second one. And how to let the HTML bold intact.

Answer 1

This replace the ‘text’ string by newText, only once :

var $t = $('#artikel');
var html = $t.html();
var i = html.indexOf('text');
html = html.substring(0, i) + newText + html.substring(i+'text'.length);
$t.html(html);