双词tag因空格重复创建问题的解决方案咨询

问题现象 #

• 可创建多个实质名称相同的标签，仅在双词标签场景下出现
• 复现操作：在双词标签的单词间添加多个空格，即可重复创建“相似”标签
• 数据库中输入内容值一致，但name列显示标签均为相似状态

解决方案 #

要彻底解决这个问题，需要前端预处理+后端校验+数据库约束三层保障，避免前端被绕过导致的重复创建。

1. 前端输入与展示处理

在创建标签的环节，统一规范空格格式，并提前做重复校验：

// 示例：修改createNewTag方法的输入处理逻辑
function createNewTag() {
    // 获取输入值，去除首尾空格，合并中间连续空格为单个
    let rawTagName = $('#tagNameInput').val();
    let normalizedTagName = rawTagName.trim().replace(/\s+/g, ' ');

    // 检查表格中是否已存在相同规范后的标签
    let table = $('#tagTable').DataTable();
    let existingTags = table.data().toArray().map(row => {
        return row.tagName.trim().replace(/\s+/g, ' ');
    });

    if (existingTags.includes(normalizedTagName)) {
        alert('该标签已存在，请不要重复创建');
        return;
    }

    // 后续提交到后端的逻辑，传递规范后的标签名
    // ...
}

同时优化搜索逻辑，确保搜索时能匹配实质相同的标签：

$('.dataTables_filter input')
.off()
.on('keyup', function() {
    // 规范搜索词的空格格式
    var searchTerm = this.value.toLowerCase().trim().replace(/\s+/g, ' ');
    $("#msgBlock").addClass('hide');
    $("#deleteMsg").addClass('hide');

    // 遍历表格数据，统一规范标签名后再匹配搜索词
    $('#tagTable').DataTable().rows().every(function() {
        let normalizedTag = this.data().tagName.toLowerCase().trim().replace(/\s+/g, ' ');
        this.search(normalizedTag.includes(searchTerm));
    }).draw();
    
    checkDataCount();
});

2. 后端接口校验与存储规范

前端校验可被绕过，后端必须做核心校验：

• 接收标签名后，先做和前端一致的空格规范化处理
• 查询数据库是否已存在该规范后的标签名，存在则返回错误
• 存储时仅保存规范后的标签名

示例后端逻辑（以Node.js为例）：

app.post('/api/tags', (req, res) => {
    const rawTagName = req.body.tagName;
    // 统一规范标签名格式
    const normalizedTagName = rawTagName.trim().replace(/\s+/g, ' ');

    // 检查数据库中是否已存在
    db.query('SELECT id FROM tags WHERE name = ?', [normalizedTagName], (err, results) => {
        if (err) {
            return res.status(500).json({ error: '数据库查询失败' });
        }
        if (results.length > 0) {
            return res.status(400).json({ message: '该标签已存在' });
        }

        // 存储规范后的标签名
        db.query('INSERT INTO tags (name) VALUES (?)', [normalizedTagName], (err) => {
            if (err) {
                return res.status(500).json({ error: '标签创建失败' });
            }
            res.status(201).json({ message: '标签创建成功' });
        });
    });
});

3. 数据库层面约束

在tags表的name字段添加唯一约束，从根源上防止重复数据插入：

ALTER TABLE tags ADD CONSTRAINT unique_tag_name UNIQUE (name);

内容的提问来源于stack exchange，提问作者pranayan pandey