URLをイメージに変換するにはどうすればよいですか？

Question

現在、以下のコードを使用して、contenteditable divにURLが貼り付けられているかどうかを検出しています。貼り付けられたURLは、自動的にリンクに変換されます（aタグで囲まれています）。

イメージURLをペーストすると<img src="https://example.com/image.jpg">に変換され、非イメージURLは標準リンク（aタグで囲まれています）に変換されるように、どのように変更しますか？

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 
     } 
    }; 


} else if (document.selection) { 

} 

function createLink(matchedTextNode) { 
    var el = document.createElement("a"); 
    el.href = 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 = $('.editable')[0]; 
var urlRegex = /http(s?):\/\/($|[^\s]+)/; 

function updateLinks() { 
    var savedSelection = saveSelection(textbox); 
    surroundInElement(textbox, urlRegex, createLink, shouldLinkifyContents); 
    restoreSelection(textbox, savedSelection); 
} 

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

Answer 1

貼り付けたURLを解析して、終了拡張子（jpg、gif、png）を検索しようとしましたか？

エンディングがそれらのいずれかと一致する場合は、単純にする必要があります。次に、hrefの適切性にURLをラップします。

あなたはこのコードを自分で書きましたか？

ここではあなたがこれを行うには、文字列のメソッドについて読むことができます。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String