Javascript 如何转换url'；在contenteditable div中插入链接和图像？

当用户将任何图像的URL输入contenteditable div时，下面的代码将自动将其转换为图像（通过contenteditable div上的

img

标记）

问题是，它将用户输入的任何URL转换为图像标记

http://example.com

将转换为`

有没有办法将普通链接转换为链接（通过

标记）和图像URL的内部图像标记

<script>

var saveSelection, restoreSelection;

if (window.getSelection && document.createRange) {
    saveSelection = function(containerEl) {
        var range = window.getSelection().getRangeAt(0);
        var preSelectionRange = range.cloneRange();
        preSelectionRange.selectNodeContents(containerEl);
        preSelectionRange.setEnd(range.startContainer, range.startOffset);
        var start = preSelectionRange.toString().length;

        return {
            start: start,
            end: start + range.toString().length
        }
    };

    restoreSelection = function(containerEl, savedSel) {
        var charIndex = 0, range = document.createRange();
        range.setStart(containerEl, 0);
        range.collapse(true);
        var nodeStack = [containerEl], node, foundStart = false, stop = false;

        while (!stop && (node = nodeStack.pop())) {
            if (node.nodeType == 3) {
                var nextCharIndex = charIndex + node.length;
                if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
                    range.setStart(node, savedSel.start - charIndex);
                    foundStart = true;
                }
                if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
                    range.setEnd(node, savedSel.end - charIndex);
                    stop = true;
                }
                charIndex = nextCharIndex;
            } else {
                var i = node.childNodes.length;
                while (i--) {
                    nodeStack.push(node.childNodes[i]);
                }
            }
        }

        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
} else if (document.selection) {
    saveSelection = function(containerEl) {
        var selectedTextRange = document.selection.createRange();
        var preSelectionTextRange = document.body.createTextRange();
        preSelectionTextRange.moveToElementText(containerEl);
        preSelectionTextRange.setEndPoint("EndToStart", selectedTextRange);
        var start = preSelectionTextRange.text.length;

        return {
            start: start,
            end: start + selectedTextRange.text.length
        }
    };

    restoreSelection = function(containerEl, savedSel) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(containerEl);
        textRange.collapse(true);
        textRange.moveEnd("character", savedSel.end);
        textRange.moveStart("character", savedSel.start);
        textRange.select();
    };
}

function createLink(matchedTextNode) {
    var el = document.createElement("img");
    el.src = matchedTextNode.data;
    el.appendChild(matchedTextNode);
    return el;
}

function shouldLinkifyContents(el) {
    return el.tagName != "A";
}

function surroundInElement(el, regex, surrounderCreateFunc, shouldSurroundFunc) {
    var child = el.lastChild;
    while (child) {
        if (child.nodeType == 1 && shouldSurroundFunc(el)) {
            surroundInElement(child, regex, createLink, shouldSurroundFunc);
        } 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 textbox = document.getElementById("text");
var urlRegex = /http(s?):\/\/($|[^ ]+)/;

function updateLinks() {
    surroundInElement(textbox, urlRegex, createLink, shouldLinkifyContents);
}

var $textbox = $(textbox);

$(document).ready(function () {
    $textbox.focus();

    var keyTimer = null, keyDelay = 1000;

    $textbox.keyup(function() {
        if (keyTimer) {
            window.clearTimeout(keyTimer);
        }
        keyTimer = window.setTimeout(function() {

            updateLinks();
            keyTimer = null;
        }, keyDelay);
    });
});

</script>

var保存选择、恢复选择；
if（window.getSelection&&document.createRange）{
saveSelection=函数（containerell）{
var range=window.getSelection（）.getRangeAt（0）；
var preselection range=range.cloneRange（）；
预选范围。选择节点内容（containerell）；
预选range.setEnd（range.startContainer，range.startOffset）；
var start=preSelectionRange.toString（）.length；
返回{
开始：开始，
结束：开始+范围.toString（）.length
}
};
restoreSelection=函数（containeerl、savedSel）{
var charIndex=0，range=document.createRange（）；
range.setStart（containerell，0）；
范围。塌陷（真）；
var nodeStack=[containerell]，node，foundStart=false，stop=false；
而（！stop&&（node=nodeStack.pop（））{
if（node.nodeType==3）{
var nextCharIndex=charIndex+node.length；
如果（！foundStart&&savedSel.start>=charIndex&&savedSel.start=charIndex&&savedSel.end匹配长度）？
matchedTextNode.splitText（matchLength）：空；
surroundingNode=surrounderCreateFunc（matchedTextNode.cloneNode（true））；
parent.insertBefore（surroundingNode，matchedTextNode）；
parent.removeChild（matchedTextNode）；
}
}
var textbox=document.getElementById（“文本”）；
var urlRegex=/http（s？）:\/\/（$|[^]+）/；
函数updateLinks（）{
surroundInElement（文本框、urlRegex、createLink、shouldLinkifyContents）；
}
变量$textbox=$（textbox）；
$（文档）.ready（函数（）{
$textbox.focus（）；
var keyTimer=null，keyDelay=1000；
$textbox.keyup（函数（）{
if（按键计时器）{
窗口清除超时（键定时器）；
}
keyTimer=window.setTimeout（函数（）{
updateLinks（）；
keyTimer=null；
}，按键延迟）；
});
});

1.是有效的URL吗？>>2.匹配

/\（jpeg | jpg | png | gif）$/i

？>>是图像，其他是锚定。此外，您还可以

新建图像（）

并测试

OneError

。也可以使用

[^]

代替

[^\s]

或简单地

\S

仍然无法使链接和图像@RokoC单独工作。Buljan您正在尝试创建一个“键入时”脚本，分别用内容可编辑中的

和

替换任何URL字符串，对吗？p脚本中的另一个东西…放置

var$textbox=$（textbox）；

和DOM中的其他DOM元素变量就绪。这就是它的用途：确保解析器读取元素。