javascript - JS : Remove duplicated values from specific string in array

Question

这是我的数组列表:

['<h3>Goalkeepers</h3><a href="#" data-id="44">Lewis Cardiff City &pound;4.00</a>',
'<h3>Goalkeepers</h3><a href="#" data-id="42">Given Aston Villa &pound;4.00</a>',
'<h3>Goalkeepers</h3><a href="#" data-id="36">Robles Everton &pound;4.30</a>']

我想删除仅包含 '<h3></h3>' 之间的重复值标签。

我的期望是这样的:

['<h3>Goalkeepers</h3><a href="#" data-id="44">Lewis Cardiff City &pound;4.00</a>',
'<a href="#" data-id="42">Given Aston Villa &pound;4.00</a>',
'<a href="#" data-id="36">Robles Everton &pound;4.30</a>']

尝试过 .reduce 、 .map 、 .filter 方法来解决这个问题。但没有运气。请有人帮助我。

谢谢!

Answer 1

快速回答:

    function removeDuplicates(a) {
        var first = null;
        return a.map(function(item) {
            var h3 = item.match(/^<h3>([^<]+)<\/h3>/);
            if(first && first === h3[1]) return item.slice(h3[0].length);
            else {
                first = h3[1];
                return item;
            }
        });   
    }

检查http://jsfiddle.net/WA8DE/ 。您可以在那里看到一个有趣的副作用(在浏览器的控制台中) - 代码将删除数组中的任何后续重复项(“Shoplifters”)。

但请注意，这不是构建和处理数据的最佳方式。如果结构像这样会方便得多:

    var data = {
        Goalkeepers: [
            {url: '#', id: 44, name: "Lewis Cardiff City", bribe: 4.00},
            {url: '#', id: 42, name: "Given Aston Villa", bribe: 4.00},
            {url: '#', id: 46, name: "Robles Everton", bribe: 4.00},
        ],
        Shoplifters: [
            // ...
        ],
        // etc.
    };

这可以从您的服务器作为 JSON 检索，并在 JSON.parse() 的帮助下几乎直接使用。您还可以从任何其他数据生成这种结构。

然后，当必须在网页上呈现 HTML 时，生成 HTML。像这样的东西:

    function dataToHTML(d) {
        var out = "";
        for(var section in data) {
            if(!data.hasOwnProperty(section)) continue;
            out += "<h3>" + section + "</h3>";
            out += data[section].map(function(item){
                return "<a href=\"" + item.url + "\" data-id=\"" + item.id + "\">" + item.name + " &pound;" + item.bribe + "</a>";
            }).join('');
        }
        return out;
    }

    dataToHTML(data); // -> HTML string

但是，这看起来几乎像一个粗糙的模板，所以您可能需要一些更优雅的东西，例如下划线模板:http://underscorejs.org/#template .

使用数据而不是字符串进行编程;)