Заменить текст элементом HTML

Question

Как я могу заменить определенный текст HTML-объектами?

пример:

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

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

function ReplaceWithObject(textSource, textToReplace, objectToReplace);

Итак, я хочу получить это:

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

И я хотел бы манипулировать элементом объекта без повторного вызова $() метода.

UPDATE: Я решил.

thanx @kasdega, я создал новый скрипт на основе вашего скрипта, потому что в вашем скрипте я не могу изменить «элемент» после замены. Это скрипт:

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

Я не знал, что метод добавления принимает несколько элементов. Это идея, нужно автоматизировать только несколько замен

спасибо всем, а здесь jsfiddle

Answer 1

сделайте разделение на текст, который вы хотите заменить, затем используйте индексы массива 0 и 1 ... что-то вроде:

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

ОБНОВЛЕНИЕ: я нашел еще одну SO сообщение Получить внешний HTML-код выбранного элемента , который указал мне на крошечный плагин jquery, который помогает здесь.

Я считаю, что jsfiddle имеет то, что вы хотите. externalHTML - это крошечный плагин jquery, который я включил в JSFiddle.

Вы также можете использовать замену, что уменьшит некоторый код: http://jsfiddle.net/kasdega/MxRma/1/

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

Answer 2

Вы можете заменить html напрямую: http://jsfiddle.net/rkw79/qNFKF/

$ (селектор) .html (function (i, o) {return o.replace ('old_html', 'new_html');})

Answer 3

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

Answer 4

вы можете использовать $ (селектор) .outerHtml, чтобы получить html-строку элемента