обернуть подстроку в текстовом узле новым узлом span

Question

Предположим, у меня есть этот абзац:

<p>this is a paragraph containing link to an image at http://lol/atme.png :)</p>

Я хочу заменить http://lol/atme.png на элемент изображения.Как я могу это сделать?Это похоже на удаление текста, но добавление элемента изображения вместо этого текста.

Помощь будет принята с благодарностью.

Answer 1

Есть две части этого. Во-первых, это извлечение URL-адресов из текста, что является непростой проблемой, в которой я не заинтересован. Я бы провел некоторое исследование, прежде чем использовать его в работе. Сейчас я буду использовать чрезвычайно простое иллюстративное регулярное выражение.

Вторая часть - это код для замены в текстовых узлах. Я ответил на похожий вопрос на днях с помощью кода, пригодного для повторного использования, и теперь я собираюсь использовать его повторно. Yay.

function createImage(matchedTextNode) {
    var el = document.createElement("img");
    el.src = matchedTextNode.data;
    el.width = 30;
    el.height = 20;
    return el;
}

function surroundInElement(el, regex, surrounderCreateFunc) {
    var child = el.lastChild;
    while (child) {
        if (child.nodeType == 1) {
            surroundInElement(child, regex, createImage);
        } else if (child.nodeType == 3) {
            surroundMatchingText(child, regex, surrounderCreateFunc);
        }
        child = child.previousSibling;
    }
}

function surroundMatchingText(textNode, regex, surrounderCreateFunc) {
    var parent = textNode.parentNode;
    var result, surroundingNode, matchedTextNode, matchLength, matchedText;
    while ( textNode && (result = regex.exec(textNode.data)) ) {
        matchedTextNode = textNode.splitText(result.index);
        matchedText = result[0];
        matchLength = matchedText.length;
        textNode = (matchedTextNode.length > matchLength) ?
            matchedTextNode.splitText(matchLength) : null;
        surroundingNode = surrounderCreateFunc(matchedTextNode.cloneNode(true));
        parent.insertBefore(surroundingNode, matchedTextNode);
        parent.removeChild(matchedTextNode);
    }
}

var urlRegex = /http(s?):\/\/($|[^\s]+)/;

function replaceImageUrls(el) {
    surroundInElement(el, urlRegex, createImage);
}

<div id="s">One
    http://www.google.co.uk/images/logos/ps_logo2.png
    two
    http://www.google.co.uk/images/logos/ps_logo2.png three</div>

<input type="button" onclick="replaceImageUrls(document.getElementById('s'))" value="replace">

Answer 2

Я мог бы неправильно понять ваш вопрос. Из того, что я понимаю, можно использовать div в качестве заполнителя

//HTML
<p>
    <div id="holder"><a>link to image</a></div></p>

//js
var h = document.getElementById("holder");
if(h)h.innerHTML = "<img.....>" //the image tag