Django中对比字典并标记差异键值对为红色的问题

我开发了一个Django应用，通过两个文本框展示来自不同函数的字典数据，需求是将两个字典中存在差异的键值对标记为红色（示例中ananas的数值存在差异）。目前已实现字典对比并获取到正确的差异集合，但模板中无法将差异项正确标红。后台打印的diff_set已正确获取到差异项[('ananas', 24), ('ananas', 30)]，但模板循环时差异项未被标红。

相关代码 #

TestFile类代码 #

class TestFile:
    def __init__(self) -> None:
        pass    
    
    def data_compare2(self):
        fruits2 = {
            "appel": 3962.00,
            "waspeen": 3304.07,
            "ananas": 30,
        }
        set2 = set([(k, v) for k, v in fruits2.items()])
        return set2

    def data_compare(self):
        fruits = {
            "appel": 3962.00,
            "waspeen": 3304.07,
            "ananas": 24,
        }
        set1 = set([(k, v) for k, v in fruits.items()])
        return set1    

    def compare_dic(self):
        set1 = self.data_compare()
        set2 = self.data_compare2()
        diff_set = list(set1 - set2) + list(set2 - set1)
        return diff_set

views.py代码 #

from .test_file import TestFile

def data_compare(request):
    test_file = TestFile()

    content_excel = ""
    content = ""
    content = test_file.data_compare()
    content_excel = test_file.data_compare2()
    diff_set = test_file.compare_dic()

    context = {"content": content, "content_excel": content_excel, "diff_set": diff_set}

    return render(request, "main/data_compare.html", context)

模板代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="form-outline">
        <div class="form-group">
            <textarea class="inline-txtarea form-control" id="content" cols="10" rows="10">
                    {% for key, value in content %}
                    <span {% if key in diff_set %} style="color: red;" {% endif %}> {{ key }}: {{value}}</span><br>
                    {% endfor %}            
            </textarea>
        </div>
    </div>

    <div class="form-outline">
        <div class="form-group">
            <textarea class="inline-txtarea form-control" id="content.excel" cols="70" rows="25">
                {% for key, value in content_excel %}
                <span {% if key in diff_set %} style="color: red;" {% endif %}>{{ key }}: {{value}}</span><br>
                {% endfor %}            
            </textarea>
        </div>
    </div>
</body>
</html>

解决方案 #

1. 修正模板判断逻辑 #

模板中的{% if key in diff_set %}条件错误：diff_set的元素是**(key, value)元组**，不是单个键，所以单个key永远不会匹配到集合中的元素。

将模板中的判断条件修改为检查当前(key, value)元组是否在diff_set中：

<!-- 第一个文本框循环 -->
{% for key, value in content %}
<span {% if (key, value) in diff_set %} style="color: red;" {% endif %}> {{ key }}: {{value}}</span><br>
{% endfor %}

<!-- 第二个文本框循环 -->
{% for key, value in content_excel %}
<span {% if (key, value) in diff_set %} style="color: red;" {% endif %}>{{ key }}: {{value}}</span><br>
{% endfor %}

2. 优化视图层（可选） #

将diff_set转为集合类型，提升查找效率：

# views.py中修改diff_set的赋值
diff_set = set(test_file.compare_dic())

3. 解决textarea无法渲染HTML的问题 #

textarea标签内的HTML标签会被当作纯文本显示，无法渲染样式。需要替换为contenteditable属性的div：

<!-- 替换第一个textarea -->
<div class="inline-txtarea form-control" id="content" cols="10" rows="10" contenteditable="true">
    {% for key, value in content %}
    <span {% if (key, value) in diff_set %} style="color: red;" {% endif %}> {{ key }}: {{value}}</span><br>
    {% endfor %}            
</div>

<!-- 替换第二个textarea -->
<div class="inline-txtarea form-control" id="content_excel" cols="70" rows="25" contenteditable="true">
    {% for key, value in content_excel %}
    <span {% if (key, value) in diff_set %} style="color: red;" {% endif %}>{{ key }}: {{value}}</span><br>
    {% endfor %}            
</div>

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