在HTML data-attr中查找值的精确与模糊搜索技术-js教程-PHP中文网

在HTML data-attr中查找值的精确与模糊搜索技术

本教程详细介绍了如何在HTML元素的 data-attr 属性中进行内容搜索。文章首先讲解了使用jQuery进行精确匹配的方法，接着深入探讨了如何利用Fuse.js等第三方库实现高效且灵活的模糊搜索功能，旨在帮助开发者根据不同需求选择并实现最佳的属性值查找策略。

在前端开发中，我们经常需要根据html元素的自定义数据属性（data-*）来查找或过滤元素。这对于构建交互式界面、实现搜索功能或数据过滤等场景至关重要。本文将详细介绍两种主要的查找方式：精确匹配和模糊搜索。

一、精确匹配 data-attr 属性值

当我们需要根据 data-attr 属性的完整、准确值来查找元素时，可以使用jQuery的选择器来实现精确匹配。这种方法简单直接，适用于已知完整搜索词的场景。

1.1 精确匹配原理

jQuery提供了一种强大的属性选择器 [attribute="value"]，可以直接匹配指定属性具有特定值的元素。对于 data-* 属性，我们可以将其视为普通属性进行匹配。例如，要查找 data-search="A-plus" 的元素，可以使用 [data-search="A-plus"]。

1.2 示例代码

以下代码展示了如何实现一个基于 data-search 属性的精确查找功能。当用户在输入框中输入内容时，系统会立即查找并显示匹配的元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>精确匹配 data-attr 示例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <p>请输入精确的搜索词 (例如: A-plus):</p>
    <input class="searcher" type="text" placeholder="输入搜索词">

    <h3>数据列表:</h3>
    <ul>    
        <li class="items" data-search="A-plus">#À plus !</li>
        <li class="items" data-search="B-minus">#B minus !</li>
        <li class="items" data-search="C-equal">#C equal !</li>
    </ul>

    <h3>搜索结果:</h3>
    <div class="result"></div>

    <script>
        /**
         * 根据 data-search 属性值精确查找元素
         * @param {string} elemSelector - 待查找元素的CSS选择器，例如 '.items'
         * @param {string} searchText - 要精确匹配的文本
         * @returns {jQuery|string} - 匹配到的元素的jQuery对象副本，如果未找到则返回 '<i>Not found!</i>'
         */
        function findElementByText(elemSelector, searchText) {
            // 使用属性选择器进行精确匹配
            const find = $(`${elemSelector}[data-search="${searchText}"]`);
            if (find.length) {
                // 如果找到，返回元素的副本，避免直接操作原始DOM
                return find.clone();
            }
            // 未找到则返回提示信息
            return '<i>未找到!</i>';
        }

        // 监听输入框的 'input' 事件，实时进行搜索
        $(document).on('input', '.searcher', function() {
            const searchTerm = $(this).val().trim(); // 获取输入值并去除首尾空格
            // 调用查找函数并将结果渲染到 .result 区域
            $('.result').html( findElementByText( '.items', searchTerm ) );
        });
    </script>
</body>
</html>

登录后复制

1.3 注意事项

大小写敏感性： 默认情况下，[attribute="value"] 选择器是大小写敏感的。如果需要不区分大小写，可能需要先将属性值和搜索词都转换为统一大小写（例如，都转为小写），但这会增加代码复杂性，通常建议在数据源层面保持一致性。
完整匹配： 这种方法要求搜索词与 data-search 属性的值完全一致。例如，搜索 "A" 将不会匹配到 data-search="A-plus"。

二、实现 data-attr 属性值的模糊搜索

在许多场景下，用户可能不记得完整的或精确的搜索词，或者希望通过部分匹配、忽略特殊字符等方式进行搜索。这时，模糊搜索就显得尤为重要。jQuery的 :contains() 选择器虽然可以进行文本内容模糊匹配，但它主要针对元素内部的文本节点，而不是 data-attr 属性的值，并且在处理复杂模糊逻辑（如容错、加权）时能力有限。因此，对于 data-attr 的模糊搜索，我们通常会借助专业的第三方库。

立即学习“前端免费学习笔记（深入）”；

2.1 为什么不直接使用 :contains 针对 data-attr？

$(selector:contains(text)) 主要用于查找包含指定文本内容的元素。如果尝试 $('li[data-search]:contains("A")')，它会查找 <li> 元素内部文本包含 "A" 的，而不是 data-search 属性值包含 "A" 的。虽然可以通过遍历元素并获取 data-search 属性值进行字符串 indexOf 或正则表达式匹配，但这会增加性能开销，并且难以实现复杂的模糊匹配算法。

2.2 使用 Fuse.js 实现模糊搜索

Fuse.js 是一个轻量级、功能强大的模糊搜索库，它提供了高度可配置的模糊匹配算法，支持对对象数组进行搜索，非常适合我们对 data-attr 值进行模糊搜索的需求。

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

查看详情

2.2.1 Fuse.js 核心概念

数据源： Fuse.js 接受一个对象数组作为数据源。我们需要将每个 <li> 元素的 data-search 值提取出来，并结合原始元素本身，构建成一个适合 Fuse.js 处理的数组。
配置选项： Fuse.js 提供了丰富的配置选项，例如：
- keys: 指定在对象中哪些属性需要参与搜索。
- threshold: 模糊匹配的阈值，0表示精确匹配，1表示完全不匹配，值越大容错性越高。
- shouldSort: 是否对结果进行排序。
搜索方法： fuse.search(searchTerm) 方法会返回一个包含匹配结果的数组。每个结果都包含 item（原始数据对象）和 score（匹配得分）。

2.2.2 示例代码

以下示例展示了如何使用 Fuse.js 对 data-search 属性进行模糊搜索。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Fuse.js 模糊搜索 data-attr 示例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- 引入 Fuse.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6/dist/fuse.min.js"></script>
</head>
<body>
    <p>请输入模糊的搜索词 (例如: A, plus, minus):</p>
    <input class="searcher" type="text" placeholder="输入搜索词">

    <h3>数据列表:</h3>
    <ul>    
        <li class="items" data-search="A-plus">#À plus !</li>
        <li class="items" data-search="A-minus">#À minus !</li>
        <li class="items" data-search="B-plus">#B plus !</li>
        <li class="items" data-search="C-equal">#C equal !</li>
    </ul>

    <h3>搜索结果:</h3>
    <ul class="result"></ul>

    <script>
        const list = []; // 用于存储 Fuse.js 的数据源

        // 遍历所有 .items 元素，构建 Fuse.js 需要的数据结构
        $('.items').each(function() {
            list.push({
                title: $(this).data('search'), // 将 data-search 的值作为搜索键
                el: $(this).clone()             // 存储原始元素的副本，以便后续渲染
            });
        });

        // 初始化 Fuse.js
        const fuse = new Fuse(list, {
            shouldSort: false, // 不对结果进行排序，按匹配度默认排序
            threshold: 0.5,    // 模糊匹配阈值，值越小越精确，值越大容错性越高
            keys: ['title']    // 指定搜索的键为 'title' (即 data-search 的值)
        });

        // 监听输入框的 'input' 事件
        $(document).on('input', '.searcher', function() {
            const searchTerm = $(this).val().trim(); // 获取输入值
            const results = fuse.search(searchTerm);  // 执行模糊搜索

            $('.result').html(''); // 清空之前的搜索结果

            if (results.length) {
                // 如果有匹配结果，遍历并添加到 .result 区域
                results.map(o => $('.result').append(o.item.el));
            } else {
                // 未找到则显示提示信息
                $('.result').html('<i>未找到!</i>');
            }
        });
    </script>
</body>
</html>

登录后复制

2.2.3 代码解析

数据准备： 首先，我们遍历所有具有 class="items" 的 <li> 元素。对于每个元素，我们创建一个包含 title (即 data-search 的值) 和 el (原始元素的 jQuery 副本) 的对象，并将其添加到 list 数组中。这个 list 数组将作为 Fuse.js 的数据源。
Fuse.js 初始化： new Fuse(list, options) 创建一个 Fuse.js 实例。
- shouldSort: false：在此示例中，我们选择不让 Fuse.js 自动排序，通常 Fuse.js 会根据匹配得分进行排序。
- threshold: 0.5：这是一个关键参数，控制模糊匹配的容错性。0 表示精确匹配，1 表示完全模糊匹配。0.5 是一个折中的值，允许一定的拼写错误或部分匹配。
- keys: ['title']：告诉 Fuse.js 在 list 数组中的每个对象的哪个属性（这里是 title）上执行搜索。
执行搜索： 当用户在输入框中输入时，fuse.search(searchTerm) 方法会被调用。它会根据配置的 keys 和 threshold 对 list 中的数据进行模糊匹配。
结果渲染： fuse.search() 返回一个结果数组，每个结果对象包含 item（即我们原始存储的 { title: ..., el: ... } 对象）和 score。我们遍历这个结果数组，将 o.item.el（原始元素的副本）添加到 .result 容器中。

2.3 其他模糊搜索库

除了 Fuse.js，还有其他一些优秀的模糊搜索库可供选择，例如：

List.js: 专注于列表和表格的搜索、排序和过滤功能，也提供了模糊搜索。
Minisearch: 一个轻量级的客户端全文本搜索库，支持模糊搜索和权重。

选择哪个库取决于项目的具体需求、性能要求和集成复杂性。

三、注意事项与总结

性能考量：
- 数据量： 对于少量数据，直接遍历和字符串匹配可能足够。但对于大量数据（数百甚至数千条），使用 Fuse.js 这样的优化库可以显著提高搜索性能和用户体验。
- DOM 操作： 频繁的 DOM 操作会影响性能。在模糊搜索示例中，我们先克隆元素并将其存储在 JavaScript 数组中，然后只在搜索结果变化时操作 DOM，这是推荐的做法。
搜索策略选择：
- 精确匹配适用于需要严格匹配的场景，例如根据 ID 或特定编码查找。
- 模糊搜索适用于用户输入不确定、需要容错或提供更灵活搜索体验的场景。
用户体验：
- 提供清晰的搜索提示和未找到结果时的反馈信息。
- 考虑添加防抖（debounce）功能，以避免在用户快速输入时频繁触发搜索，从而优化性能。
国际化与特殊字符：
- 原始问题提到了重音字符（如 À）。Fuse.js 在一定程度上可以处理这类字符的模糊匹配，但如果需要更严格的重音或特殊字符忽略，可能需要在将数据传递给 Fuse.js 之前进行预处理，例如将所有字符转换为其无重音的等价形式。