根据部分内容删除重复的数组元素？

Question

编辑：

上下文：我继承了一个进程（来自前同事）生成一个通用文件，其中包括创建以下项目列表。该列表稍后需要转化为一系列保留嵌套级别的无序链接。

从以下数组中，我需要删除重复项，无论基于href属性的值显示多少次。

var array = [ 
'<tag href="cheese.html">', 
'<tag href="cheddar.html"></tag>', 
' <tag href="cheese.html"></tag>', 
'</tag>', 
'<tag href="burger.html">', 
' <tag href="burger.html">', 
' <tag href="burger.html"></tag>' 
' </tag>' 
'</tag>' 
'<tag href="lettuce.html">', 
' <tag href="lettuce.html">', 
' <tag href="lettuce.html"></tag>', 
' </tag>', 
'</tag>', 
'<tag href="tomato.html">', 
' <tag href="tomato.html"></tag>', 
' <tag href="tomato.html">', 
' <tag href="tomato.html"></tag>', 
' <tag href="tomato.html">', 
'  <tag href="tomato.html"></tag>', 
'  <tag href="tomato.html">', 
'  <tag href="tomato.html"></tag>', 
'  </tag>', 
' </tag>', 
' </tag>', 
'</tag>', 
]; 

阵列已全部重复删除后，它应该是这样的：

'<tag href="cheese.html">', 
'<tag href="cheddar.html"></tag>', 
'</tag>', 
'<tag href="burger.html">', 
'</tag>', 
'<tag href="lettuce.html">', 
'</tag>', 

从这里，我没有问题提取我需要生成我的链接无序列表的信息。我只需要帮助搞清楚如何删除重复。

Answer 1

这将有助于了解问题的背景。

此函数返回所有具有唯一href值的字符串，但对管理结束标记没有任何作用。去除结束标记将是一项复杂的任务。另外我很确定用正则表达式解析HTML是not a good idea。

function sortByHref (array) { 
    var hrefReg = new RegExp('href="(.*)"'); 
    var seen = {}; 
    var match, href; 
    return array.filter(function (x) { 
    match = hrefReg.exec(x); 
    if (match) { 
     href = match[1]; 
     if (seen.hasOwnProperty(href) && seen[href]) return false; 
     seen[href] = true; 
    } 
    return true; 
    }); 
} 

如果你已经描述了你到底想要完成什么，那么必须有另一种方法来解决你的问题。

Answer 2

这是一个特意详细的解决方案，以便于理解。我假设没有href值的标签将根据整个字符串简单地删除重复项。

var arr = [ 
    '<tag href="cheese.html">', 
    '<tag href="cheddar.html"></tag>', 
    ' <tag href="cheese.html"></tag>', 
    '</tag>', 
    '<tag href="burger.html">', 
    ' <tag href="burger.html">', 
    ' <tag href="burger.html"></tag>', 
    ' </tag>', 
    '</tag>' 
]; 

// Remove whitespaces on both ends from each string in array 
// Not a necessary step, but will just handle leading and trailing whitespaces this way for convenience 
arr = arr.map(function(tagString) { 
    return tagString.trim(); 
}); 

// Regex to retrieve href value from tags 
var hrefRegexp = /(\s+href=\")([^\"]+)(\")/g; 

// Create an array with just the href values for easier lookup 
hrefArr = arr.map(function(tagString) { 
    // Run regex against the tag string 
    var href = hrefRegexp.exec(tagString); 

    // Reset `RegExp`'s index 
    hrefRegexp.lastIndex = 0; 

    // If no href match is found, return null, 
    if (href === null) return null; 

    // Otherwise, return the href value 
    else return href[2]; 
}); 

// Store array length (this value will be used in the for loop below) 
var arrLength = arr.length; 

// Begin from the left and compare values on the right 
for (var leftCompareIndex = 0; leftCompareIndex < arrLength; leftCompareIndex++) { 
    for (var rightCompareIndex = leftCompareIndex + 1; rightCompareIndex < arrLength; rightCompareIndex++) { 

     // A flag variable to indicate whether the value on the right is a duplicate 
     var isRightValueDuplicate = false; 

     // If href value doesn't exist, simply compare whole string 
     if (hrefArr[leftCompareIndex] === null) { 
      if (arr[leftCompareIndex] === arr[rightCompareIndex]) { 
       isRightValueDuplicate = true; 
      } 
     } 

     // If href value does exist, compare the href values 
     else { 
      if (hrefArr[leftCompareIndex] === hrefArr[rightCompareIndex]) { 
       isRightValueDuplicate = true; 
      } 
     } 

     // Check flag and remove duplicate element from both original array and href values array 
     if (isRightValueDuplicate === true) { 
      arr.splice(rightCompareIndex, 1); 
      hrefArr.splice(rightCompareIndex, 1); 
      arrLength--; 
      rightCompareIndex--; 
     } 
    } 
} 

console.log(arr); 

/* Should output 
[ '<tag href="cheese.html">', 
    '<tag href="cheddar.html"></tag>', 
    '</tag>', 
    '<tag href="burger.html">' ] 
    */