网址收藏夹：完善功能，提升用户体验

在这个代码基础上，我们可以进一步完善。

添加网址时，可以自动获取网站名称作为网址的名称，而不是直接显示网址。可以使用以下代码：

$newUrl = $_POST['url'];
if (!in_array($newUrl, $urls)) {
    if (filter_var($newUrl, FILTER_VALIDATE_URL)) {
        $name = parse_url($newUrl, PHP_URL_HOST) ?: $newUrl;
        $urls[] = $name . '|' . $newUrl;
        file_put_contents($url_file, implode("
", $urls));
        echo 'success';
    } else {
        echo 'invalid url';
    }
} else {
    echo 'url already exists';
}

在这里，我们把网址的名称和网址本身用竖线分隔开来，方便在输出表格时分别处理。

在输出表格时，可以根据搜索框的输入来高亮匹配的关键字。可以使用以下代码：

$('#search-input').on('input', function() {
    var keyword = $(this).val().trim();
    if (keyword !== '') {
        $('#url-table tbody tr').hide();
        $('#url-table tbody tr').each(function() {
            var name = $(this).find('td:nth-child(2) a').text();
            var url = $(this).find('td:nth-child(3)').text();
            if (name.toLowerCase().indexOf(keyword.toLowerCase()) !== -1 || url.toLowerCase().indexOf(keyword.toLowerCase()) !== -1) {
                $(this).show();
                $(this).find('td').each(function() {
                    var html = $(this).html();
                    html = html.replace(new RegExp(keyword, 'gi'), function(match) {
                        return '<span class='highlight'>' + match + '</span>';
                    });
                    $(this).html(html);
                });
            }
        });
    } else {
        $('#url-table tbody tr').show();
        $('#url-table tbody tr td').each(function() {
            $(this).html($(this).text());
        });
    }
});

在这里，我们先遍历所有表格行，判断名称和网址是否包含搜索关键字，如果包含则显示并用特殊样式高亮匹配的关键字。

在输出表格时，可以根据名称排序。可以使用以下代码：

$('#name-sort').click(function(e) {
    e.preventDefault();
    var rows = $('#url-table tbody tr').detach().toArray();
    rows.sort(function(a, b) {
        var nameA = $(a).find('td:nth-child(2) a').text().toLowerCase();
        var nameB = $(b).find('td:nth-child(2) a').text().toLowerCase();
        return nameA.localeCompare(nameB);
    });
    $('#url-table tbody').append(rows);
});

在这里，我们先把所有表格行从表格中移除，然后按名称排序，最后再添加回表格中。