如何用JavaScript在表单文本域中添加项目符号？解决重复添加问题

问题原因 #

你的代码每次按下回车都会遍历所有行，给所有非空行添加• 前缀。第一次回车时，line1会变成• line1；第二次回车时，已经带有• 的行被再次处理，就会变成• • line1，这就是重复项目符号的根源。

解决方案 #

方案1：仅处理当前回车的上一行（推荐）

只对光标所在行的上一行进行处理，避免重复格式化已有项目符号的行，同时保持光标位置正确：

document.addEventListener('keydown', function (e) {
    if (e.target.id === 'id_form-0-roles' && e.keyCode === 13) {
        const textarea = e.target;
        const start = textarea.selectionStart;
        const value = textarea.value;
        
        // 定位当前光标所在行的起始位置
        let lineStart = start;
        while (lineStart > 0 && value[lineStart - 1] !== '\n') {
            lineStart--;
        }
        
        // 处理上一行（如果存在）
        if (lineStart > 0) {
            let prevLineEnd = lineStart - 1;
            while (prevLineEnd > 0 && value[prevLineEnd - 1] !== '\n') {
                prevLineEnd--;
            }
            const prevLine = value.slice(prevLineEnd, lineStart).trim();
            // 上一行非空且未添加项目符号时才添加
            if (prevLine && !prevLine.startsWith('• ')) {
                textarea.value = value.slice(0, prevLineEnd) + '• ' + prevLine + value.slice(lineStart);
                // 调整光标到新行开头
                textarea.selectionStart = textarea.selectionEnd = start + 2;
            }
        }
        e.preventDefault();
    }
});

方案2：全局处理但跳过已有项目符号的行

遍历所有行时，先检查是否已带有• 前缀，避免重复添加：

document.addEventListener('keydown', function (e) {
    if (e.target.id === 'id_form-0-roles' && e.keyCode === 13) {
        formatRoles(e.target);
        e.preventDefault();
    }
});

function formatRoles(textarea) {
    let lines = textarea.value.split('\n');
    let formattedText = '';
    lines.forEach(function (line) {
        const trimmedLine = line.trim();
        if (trimmedLine !== '') {
            // 已带项目符号则直接保留，否则添加
            formattedText += trimmedLine.startsWith('• ') ? `${trimmedLine}\n` : `• ${trimmedLine}\n`;
        } else {
            formattedText += '\n';
        }
    });
    textarea.value = formattedText;
}

方案对比 #

• 方案1性能更优，仅处理目标行，不会修改用户已手动调整的内容，光标位置更友好。
• 方案2适合需要批量格式化所有行的场景，但会覆盖用户手动修改的项目符号格式。

内容的提问来源于stack exchange，提问作者developer-re