将重复的 URL 合并为 1 个 URL、Javascript

Question

我有显示/输出来自文本区域的 url 的功能。但目前它不会将重复项合并为 1 URL。我怎样才能输出相同的网址（合并 http://google.com, www.google.com, http://www.google.com，或只是 google.com）？

目前：

应该是：

我的代码：

let result = $("#converted_url");

$("#textarea").on("input", function() {
    result.html(""); // Reset the output

    var urlRegex = /(https?:\/\/[^\s]+)/g;
    $("#textarea").val().replace(urlRegex, function(url) {
      var link = '<div><a href="' + url + '">' + url + '</a></div>';

      // Append the new information to the existing information
      result.append(link);
    });
});

.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea"></textarea>
<div id="converted_url"></div>

JS FIDDLE

学分

斯科特·马库斯，Whosebug

Answer 1

简单修复：将匹配的 url 存储在数组中，仅当 url 不存在于该数组中时才追加 link。

更新：将正则表达式更改为 /((https?:\/\/|www\.|\/\/)[^\s]+)/g，因此它匹配以 http://、https://、www.、// 开头的 link。您可以使用涵盖其他情况的任何其他正则表达式（如 http://www.），只需修改存储的 url 以便您能够比较它（您可能想要处理 http 和 https link 作为唯一）。

let result = $("#converted_url");

$("#textarea").on("input", function() {
  result.html(""); // Reset the output

  var urlRegex = /((https?:\/\/|www\.|\/\/)[^\s]+)/g;
  var found = [];
  $("#textarea").val().replace(urlRegex, function(url) {
    let trimmedUrl = url.replace(/^(https?:\/\/|www\.|\/\/)/, "");
    if (found.includes(trimmedUrl)) {
      return;
    }
    found.push(trimmedUrl);
    var link = '<div><a href="' + url + '">' + url + '</a></div>';

    // Append the new information to the existing information
    result.append(link);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
(Just type anything in the box to trigger the event.)<br>
<textarea id="textarea">http://google.com blah blah http://facebook.com</textarea>

<div id="converted_url"></div>

Answer 2

let result = $("#converted_url");

$("#textarea").on("input", function() {
    result.html(""); // Reset the output
    
    var urlRegex = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9]\.[^\s]{2,})/g;
     var found = [];
    $("#textarea").val().replace(urlRegex, function(url) {
    var link = "";
     var protOmmitedURL = url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0];
        if (found.includes(protOmmitedURL)) {
      return;
    }else
    {
      link = '<div><a href="' + url + '">' + url + '</a></div>';
      found.push(protOmmitedURL);
    }
     
      // Append the new information to the existing information
      result.append(link);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
(Just type anything in the box to trigger the event.)<br>
<textarea id="textarea">http://google.com blah blah http://facebook.com</textarea>

<div id="converted_url"></div>

将重复的 URL 合并为 1 个 URL、Javascript

Merge duplicate URLs into 1 URL, Javascript

javascript

arrays

url

textarea

duplicates