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

score 4 · Answer 1 · edited May 23 '17 at 12:23

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());
}

Kenneth J · Answer 2 · 2011-07-22T20:00:48.083

0

function textToObj (text,obj,$src){
    var className = "placeholder-"+text;
    $src.html($src.html().replace(text,"<div class='"+className+"'></div>"));
    $("."+className).replace(obj);
}

edited Jul 22 '11 at 20:00

answered Jul 22 '11 at 19:55

Kenneth J

4,846
11
39
56

score -2 · Answer 3 · answered Jul 22 '11 at 19:29

-2

you can use $(selector).outerHtml to get the html string of an element

answered Jul 22 '11 at 19:29

Parv Sharma

12,581
4
48
80

ok. i do this: var obj = $(''); 'some string 2 replace'.replace('string',$(obj).outerHTML); but when i try do this $(obj).click(function(){console.log('works!');}); dont work. – iLevi Jul 22 '11 at 19:44

score -2 · Answer 4 · answered Jul 22 '11 at 19:55

-2

You can replace the html directly: http://jsfiddle.net/rkw79/qNFKF/

$(selector).html(function(i,o) { return o.replace('old_html','new_html'); })

answered Jul 22 '11 at 19:55

rkw

7,287
4
26
39

1

This does not answer the question: "Replace **text** with **HTML** element. – Luke Sep 04 '15 at 01:40

Replace text with HTML element

4 Answers4

Linked