Replace text with HTML element

Question

How can I replace a specific text with HTML objects?

example:

var text = "some text to replace here.... text text text";

var element = $('<img src="image">').event().something...

function ReplaceWithObject(textSource, textToReplace, objectToReplace);

So I want to get this:

 "some text to replace < img src...etc >.... text text text"

And I would like manipulate the object element without call again $() method.

UPDATE: I solved.

thanx @kasdega, i made a new script based in your script, because in your script i can't modify the "element" after replace. This is the script:

$(document).ready(function() {
    var text = "some text to replace here.... text text text";
    var element = $('<img />');

    text = text.split('here');
    $('.result').append(text[0],element,text[1]);
$(element).attr('src','http://bit.ly/mtUXZZ');
    $(element).width(100);
});

I didnt know that append method accept multiples elements. That is the idea, only need to automate for multiple replacements

thanx to all, and here the jsfiddle

Answer 1

do a split on the text you want to replace then use the array indexes 0 and 1...something like:

function ReplaceWithObject(textSource, textToReplace, objectToReplace) {
    var strings = textSource.split(textToReplace);
    if(strings.length >= 2) {
        return strings[0] + objectToReplace.outerHTML() + strings[1];
    }
    return "";
}

UPDATE: I found another SO post Get selected element's outer HTML that pointed me to a tiny jquery plugin that helps here.

I believe this jsfiddle has what you want. outerHTML is the tiny jquery plugin I included in the JSFiddle.

You can also use replace which will reduce some code: http://jsfiddle.net/kasdega/MxRma/1/

function ReplaceWithObject(textSource, textToReplace, objectToReplace) {
    return textSource.replace(textToReplace, objectToReplace.outerHTML());
}