Javascript dom使用新的span节点在textnode中包装子字符串

假设我有这样一段话：

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

这是一段包含指向以下位置图像的链接的段落：http://lol/atme.png ：）

我想替换

http://lol/atme.png

带有图像元素。 我该怎么做？ 这类似于删除文本，但添加一个图像元素来代替该文本

---

非常感谢您的帮助。

我可能误解了您的问题。 据我所知，可以使用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

//HTML

链接到图像

//js
var h=document.getElementById（“持有人”）；
if（h）h.innerHTML=”“//图像标记

这有两个部分。第一个是从文本中提取URL，这是一个我不太感兴趣的棘手问题。在将其用于生产之前，我会做一些研究。现在，我将使用一个非常简单的示例性正则表达式

第二部分是在文本节点内进行替换的代码。前几天我用了一些可重用的代码，现在我开始重用它。耶

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">

函数createImage（matchedTextNode）{
var el=document.createElement（“img”）；
el.src=matchedTextNode.data；
el.宽度=30；
标高高度=20；
返回el；
}
函数surroundInElement（el、正则表达式、surrounderCreateFunc）{
var child=el.lastChild；
while（儿童）{
if（child.nodeType==1）{
surroundInElement（子级、正则表达式、createImage）；
}else if（child.nodeType==3）{
surroundMatchingText（子级、正则表达式、surrounderCreateFunc）；
}
child=child.previousSibling；
}
}
函数surroundMatchingText（textNode、regex、surrounderCreateFunc）{
var parent=textNode.parentNode；
var结果，环绕节点，匹配文本节点，匹配长度，匹配文本；
while（textNode&（result=regex.exec（textNode.data）））{
matchedTextNode=textNode.splitText（结果.索引）；
matchedText=结果[0]；
MatchedLength=matchedText.length；
textNode=（matchedTextNode.length>matchelength）？
matchedTextNode.splitText（matchLength）：空；
surroundingNode=surrounderCreateFunc（matchedTextNode.cloneNode（true））；
parent.insertBefore（surroundingNode，matchedTextNode）；
parent.removeChild（matchedTextNode）；
}
}
var urlRegex=/http（s？）:\/\/（$|[^\s]+）/；
函数replaceMageUrls（el）{
surroundInElement（el、urlRegex、createImage）；
}
一个
http://www.google.co.uk/images/logos/ps_logo2.png
二
http://www.google.co.uk/images/logos/ps_logo2.png 三

不清楚您为什么需要XPath…这不是一个很长的说法：

（e=document.getElementsByClassName（'pln'）[0]）.innerHTML=e.innerHTML.replace（/[a-z]{3，}:\/\/[^\s]+/g，函数{return”“}）

（您可以在控制台中运行它）@orwellphicle:我想在这种情况下，只要处理的是没有嵌套元素的单个元素。