Dom, завершающий подстроку в текстовом поле с новым диапазоном node

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

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

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

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

Ответ 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">

Ответ 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