如何用JavaScript标记Django表单textarea中匹配列表的词汇？

为什么会显示一串数字？ #

你用for(var x in form_content.value)遍历字符串时，for...in迭代的是字符串的索引（数字），不是每个字符或单词。循环里的x其实是0、1、2...这些位置序号，拼起来自然就是那串数字。

完整修正方案 #

1. 安全传递Django上下文列表到JS

不要直接用{{ dummy_list|safe }}，容易有XSS风险，改用Django的json_script过滤器更规范：

{# 在模板中添加这段，放在script之前 #}
{{ dummy_list|json_script:"dummy-list" }}

2. 修正JavaScript逻辑（纯文本标记加粗）

要实现“匹配列表词汇并标记”，需要先把文本拆分成单词，再逐个检查，同时注意textarea不支持富文本HTML标签的问题：

function Mark_words(id) {
    const textarea = document.getElementById(id);
    // 从json_script获取正确的JS数组
    const dummyList = JSON.parse(document.getElementById('dummy-list').textContent);
    // 按空格拆分文本为单词（可处理多余空格）
    const words = textarea.value.split(/\s+/);
    let newContent = '';

    words.forEach(word => {
        // 清理单词前后的标点（比如逗号、句号），避免匹配失败
        const cleanWord = word.replace(/^[^\w]+|[^\w]+$/g, '');
        if (dummyList.includes(cleanWord)) {
            // textarea只能显示纯文本，用**标记加粗
            newContent += `**${word}** `;
        } else {
            newContent += `${word} `;
        }
    });

    // 去掉末尾多余空格，更新textarea内容
    textarea.value = newContent.trim();
}

3. 如果要真正的富文本加粗（显示粗体样式）

因为textarea不支持渲染HTML标签，所以需要把textarea换成contenteditable的div，同时配合隐藏input同步内容以便表单提交：

• 模板修改：

{# 替换原来的textarea #}
<div id="test" contenteditable="true" style="border:1px solid #ccc; padding:8px; min-height:150px;">{{ form.testfield.value }}</div>
{# 添加隐藏input，用于表单提交时传递内容 #}
<input type="hidden" name="testfield" id="test-hidden">

• 对应JS修改：

function Mark_words(id) {
    const editableDiv = document.getElementById(id);
    const hiddenInput = document.getElementById('test-hidden');
    const dummyList = JSON.parse(document.getElementById('dummy-list').textContent);
    const text = editableDiv.textContent;
    const words = text.split(/\s+/);
    let newHTML = '';

    words.forEach(word => {
        const cleanWord = word.replace(/^[^\w]+|[^\w]+$/g, '');
        if (dummyList.includes(cleanWord)) {
            newHTML += `<b>${word}</b> `;
        } else {
            newHTML += `${word} `;
        }
    });

    editableDiv.innerHTML = newHTML.trim();
    // 同步内容到隐藏input，确保表单能提交
    hiddenInput.value = editableDiv.textContent;
}

4. 按钮的小优化

把按钮的type="submit"改成type="button"，避免点击时触发表单提交：

<button type="button" class="btn btn-info" onclick="Mark_words('test')">Mark words</button>

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