如何使用 JavaScript 将纯 URL 替换为链接？

给定一个平面 URL，任务是将纯 URL 替换为链接。这个问题可以借助正则表达式来解决。
方法一：

• RegExp – 在提供的文本中查找 URL。
• 此 RegExp 解析 URL 并将地址放入 $1 变量。
• 获取文本中的 URL 后，将其替换为 元素并设置其 href 和其他属性。

示例 1：此示例实现了上述方法。

html

    
        How to replace plain URL with
        link using JavaScript ?
    

 

     
    
        GeeksForGeeks
    
     
    
    
     
    
        click here
    
     
    
    
     
    
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        var text = 'This is https://www.geeksforgeeks.org/';
         
        up.innerHTML = "Click on the button to replace "
                + "plain URLs with links.<br>" + text;
         
        function rep(text) {
             
            // Put the URL to variable $1 after visiting the URL
            var Rexp =
/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g;
             
             // Replac the RegExp content by HTML element
            return text.replace(Rexp,
                    "<a href='$1' target='_blank'>Link to URL</a>");
        }
         
        function GFG_Fun() {
            down.innerHTML = rep(text);
        }
    

 

---

输出：

• 在点击按钮之前：
  

• 点击按钮后：
  

方法二：

• RegExp – 在提供的文本中查找 URL 并查找 URL 的域名。
• 获取文本中的 URL 后，将其替换为 元素并设置其 href 和其他属性。它还用域名替换链接文本。

示例 2：此示例实现了上述方法。

html

 

    
        How to replace plain URL with
        link using JavaScript ?
    

 

     
    
        GeeksForGeeks
    
     
    
    
     
    
        click here
    
     
    
    
     
    
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        var text = 'This is https://www.geeksforgeeks.org/';
         
        up.innerHTML = "Click on the button to replace "
                + "plain URLs with links.<br>" + text;
         
        function rep(text) {
            // Put the URL to variable $1 and Domain name
            // to $3 after visiting the URL
            var Rexp =
/(\b(https?|ftp|file):\/\/([-A-Z0-9+&@#%?=~_|!:,.;]*)([-A-Z0-9+&@#%?\/=~_|!:,.;]*)[-A-Z0-9+&@#\/%=~_|])/ig;
             
            // Replacing the RegExp content by HTML element
            return text.replace(Rexp,
                    "<a href='$1' target='_blank'>$3</a>");
        }
         
        function GFG_Fun() {
            down.innerHTML = rep(text);
        }
    

 

输出：

• 在点击按钮之前：
  

• 点击按钮后：