Question

我有一个功能，该功能显示/输出来自文本区域的网址。目前，它不会将重复项合并到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

积分

Scott Marcus，Stackoverflow

Answer 1

简单修复：将匹配的url存储在数组中，并仅在该数组中不存在url时才附加链接。

更新：将正则表达式更改为/((https?:\/\/|www\.|\/\/)[^\s]+)/g，以便它匹配以http://，https://，www.，//开头的链接。您可以使用涵盖其他情况的任何其他正则表达式（例如http://www.），只需修改存储的url，以便可以进行比较（您可能希望将http和https链接视为唯一）。

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

2 个答案: