如何在粘貼時自動將url轉換爲超鏈接

Question

當我嘗試在https://stackoverflow.com/之類的文本框中粘貼url時，它不會自動轉換爲超鏈接。

我試過使用正則表達式，這是我之前詢問的Question。我在這個問題中使用的函數可以正常工作，但實際上它會替換所有鏈接，包括標籤中的鏈接（IMG，現有的A HREF）。

我不想使用regx如果我使用regx轉換時發生，當我點擊任何提交或保存按鈕。

**當用戶粘貼在文本框中輸入一個URL應該自動轉換的任何鏈接的超鏈接****

我已經嘗試過這種使用至REGx

例如：

what = "<span>In the task system, is there a way to automatically have any site/page URL or image URL be hyperlinked in a new window?</span><br><br><span>So If I type or copy http://www.stackoverflow.com/&nbsp; for example anywhere in the description, in any of the internal messages or messages to clients, it automatically is a hyperlink in a new window.</span><br><a href="http://www.stackoverflow.com/">http://www.stackoverflow.com/</a><br> <br><span>Or if I input an image URL anywhere in support description, internal messages or messages to cleints, it automatically is a hyperlink in a new window:</span><br> <span>https://static.doubleclick.net/viewad/4327673/1-728x90.jpg</span><br><br><a href="https://static.doubleclick.net/viewad/4327673/1-728x90.jpg">https://static.doubleclick.net/viewad/4327673/1-728x90.jpg</a><br><br><br><span>This would save us a lot time in task building, reviewing and creating messages.</span> 



Test URL's 
     http://www.stackoverflow.com/ 
     https://stackoverflow.com/ 
     https://stackoverflow.com/ 
     www.stackoverflow.com 
     //stackoverflow.com/ 
     <a href='https://stackoverflow.com/'>https://stackoverflow.com/</a>"; 

我試過這個代碼

function Linkify(what) { 
    str = what; out = ""; url = ""; i = 0; 
    do { 
     url = str.match(/((https?:\/\/)?([a-z\-]+\.)*[\-\w]+(\.[a-z]{2,4})+(\/[\w\_\-\?\=\&\.]*)*(?![a-z]))/i); 
     if(url!=null) { 
      // get href value 
      href = url[0]; 
      if(href.substr(0,7)!="http://") href = "http://"+href; 

      // where the match occured 
      where = str.indexOf(url[0]); 

      // add it to the output 
      out += str.substr(0,where); 

      // link it 
      out += '<a href="'+href+'" target="_blank">'+url[0]+'</a>'; 

      // prepare str for next round 
      str = str.substr((where+url[0].length)); 
     } else { 
      out += str; 
      str = ""; 
     } 
    } while(str.length>0); 
    return out; 
} 

fiddle無法運作

是否有可能將其自動轉換，當我們在文本框中粘貼URL就像我們在棧上的流動得到我可以有一些例子嗎？

謝謝。

Answer 1

Autolink URL in ContentEditable Iframe

在這個問題上我回答

，這樣當用戶粘貼在一個RichTextBox一個URL，它會自動轉換任何超鏈接的鏈接 - 在這裏我的richtextbox不是一個div它的iframe

如果你的是一個div或任何其他可從以下兩個問題

Autolink URL in contenteditablejQuery: Convert text URL to link as typing

得到答案，這裏的代碼

autoAppLink: function (Iframe) { 
    var saveSelection, restoreSelection; 

    if (window.getSelection && document.createRange) { 
     saveSelection = function (containerEl) { 
      var range = iframe[0].contentWindow.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 = iframe[0].contentWindow.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("a"); 
     el.href = matchedTextNode.data; 
     el.target = "_blank"; 
     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 iframe = Iframe, 
     textbox = iframe.contents().find("body")[0]; 
    var urlRegex = /http(s?):\/\/($|[^ ]+)/; 

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

    var $textbox = $(textbox); 


    $textbox.focus(); 

    var keyTimer = null, keyDelay = 1000; 

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

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

} 

Answer 2

這將工作：

var newStr = str.replace(/(<a href=")?((https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)))(">(.*)<\/a>)?/gi, function() { 
    return '<a href="' + arguments[2] + '">' + (arguments[7] || arguments[2]) + '</a>' 
}); 

JSFiddle here和Regexr