在Django中，当我比较两个Html文本时，如何删除空白行，以便在有空白行的情况下使比较积极？

问题描述 投票：0回答：1

我正在使用 Django 比较两个文本。准确地说，我正在使用 Json 和 difflib 模块比较两个 HTML 代码。比较的两个文件是：

user_input.html
和
source_compare.html
，与views.py中的
def function_comparison
函数进行比较。

问题：如果没有空白行，比较可以正常工作，但问题是，如果行之间有空格（1行或什至更多行），则两个html文件是不同的，所以我得到了预先配置的留言

"No, it is not the same!"
.

我想要什么：如果有空行（1行或更多行），我希望比较是正确的（所以我收到消息

"Yes, it is the same!"
），所以就好像我想“忽略”空白行。

示例：我将向您展示一个示例。我希望比较是相同的，例如，如果我在两个文件中有这个 html（请注意 

user_input.html
中行之间的空格）：

在 

source_compare
.html 中：

<!DOCTYPE html>
<html>
     <head>
         <title>Page Title</title>
     </head>
     <body>
         <h1 class="heading">This is a Heading</h1>
         <p>This is a paragraph.</p>
     </body>
</html>

在第一页的文本框中（

user_input.html
）： 

<!DOCTYPE html>
<html>
     <head>
         <title>Page Title</title>
     </head>

     <body>
         <h1 class="heading">This is a Heading</h1>
         <p>This is a paragraph.</p>

     </body>

</html>

我希望比较是积极的并且结果相同（我收到消息

"Yes, it is the same!"
），尽管一个 html 文件在行之间有空格，而另一个文件没有空格。目前这两个文件在比较中是不同的，所以我收到消息
"No, it is not the same!"

这是代码：

index.html

{% load static %}

<!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>University</title>

    <link rel="stylesheet" href ="{% static 'css/style.css' %}" type="text/css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

</head>

<body>
  
  <div class="test">

    <div>Input User</div> 

      <div class="editor">
        <pre class="editor-lines"></pre>
        <div class="editor-area">
          <pre class="editor-highlight"><code class="language-html"></code></pre>
          <textarea 
              class="editor-textarea" 
              id="userinput"
              data-lang="html" 
              spellcheck="false" 
              autocorrect="off" 
              autocapitalize="off">
        &lt;!DOCTYPE html>
        &lt;html>
        &lt;head>
        &lt;title>Page Title&lt;/title>
        &lt;/head>

        &lt;body>     
        &lt;h1 class="heading">This is a Heading&lt;/h1>   
        &lt;p>This is a paragraph.&lt;/p>       

        &lt;/body>

        &lt;/html>
          </textarea>
        </div>
      </div>

    </div> 
      
    <button type="submit" onclick="getFormData();">Button</button>
  
    <br><br>
    <div>Comparison Result</div>
    <div class="result row2 rowstyle2" id="result">
      {% comment %} Ajax innerHTML result {% endcomment %}
    </div>
    
  </div> 

{% comment %} script to disable "want to send form again" popup {% endcomment %}
<script>
  if ( window.history.replaceState ) {
      window.history.replaceState( null, null, window.location.href );
  }
</script>

<script>
  function getFormData() {
      $.ajax({
          type:"GET",
          url: "{% url 'function_comparison' %}",
          data:{
              // con Div: "formData": document.getElementById("userinput").innerText
            "formData": document.getElementById("userinput").value
          },
          success: function (response) {
              document.getElementById("result").innerHTML = response.message;
          },
          error: function (response) {
              console.log(response)
          }
      });
  }
</script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.css">

</body>
</html>

views.py

from django.http import JsonResponse
from django.shortcuts import render
import difflib
from django.conf import settings
import re
   
def index(request):
    return render(request, "index.html")


def function_comparison(request):
    context = {}
    if request.method == "GET":
        
        user_form_data = request.GET.get("formData", None)

        with open('App1/templates/user_input.html', 'w') as outfile:
            outfile.write(user_form_data)

        file1 = open('App1/templates/source_compare.html', 'r').readlines()
        file2 = open('App1/templates/user_input.html', 'r').readlines()

        file1_stripped = []
        file2_stripped = []

        # FIXED TEXT WHITE SPACE PROBLEM
        # re sub here checks for each item in the list, and replace a space, or multiple space depending, with an empty string
        for file1_text in file1:
            file1_text = re.sub("\s\s+", "", file1_text)
            file1_stripped.append(file1_text)

        for file2_text in file2:
            file2_text = re.sub("\s\s+", "", file2_text)
            file2_stripped.append(file2_text)

        # check if the last item in the user input's list is an empty line with no additional text and remove it if thats the case.
        if file2_stripped[-1] == "":
            file2_stripped.pop()
        ### End - Fixed text white space problem ###

        htmlDiffer = difflib.HtmlDiff(linejunk=difflib.IS_LINE_JUNK, charjunk=difflib.IS_CHARACTER_JUNK)
        htmldiffs = htmlDiffer.make_file(file1_stripped, file2_stripped, context=True)

        if "No Differences Found" in htmldiffs:
            context["message"] = "Yes, it is the same!"
        
        if settings.DEBUG:
            if "No Differences Found" not in htmldiffs:
                context["message"] = htmldiffs
        else:
            if "No Differences Found" not in htmldiffs:
                context["message"] = "No, it is not the same!"

    return JsonResponse(context, status=200)

user_input.html：将为空

source_compare.html：这是默认设置，行与行之间没有间隙

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>               
        <h1 class="heading">This is a Heading</h1>   
        <p>This is a paragraph.</p>
    </body>
</html>

myapp/urls.py

from django.urls import path
from . import views

urlpatterns=[
  path('', views.index, name='index'), 
  path('function_comparison/', views.function_comparison,name="function_comparison"),
]

项目/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('App1.urls')),
]

为了完整起见，我还插入了最小的 CSS：

样式.css

*,
*::after,
*::before {
    margin: 0;
    box-sizing: border-box;
}
  

.rowstyle1 {
  background-color: black;
  color: white;
}

.row2 {
  margin-top: 20px;
  width: 100%;
}


.rowstyle2 {
  background-color: #ededed;;
  color: black;
}


/* Code Editor per Highlightjs */

/* Scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 1rem;
}

.editor {
  --pad: 0.5rem;
  display: flex;
  overflow: auto;
  background: #1e1e1e;
  height: 100%;
  width: 100%;
  padding-left: 4px;
}

.editor-area {
  position: relative;
  padding: var(--pad);
  height: max-content;
  min-height: 100%;
  width: 100%;
  border-left: 1px solid hsl(0 100% 100% / 0.08);
}

.editor-highlight code,
.editor-textarea {
  padding: 0rem !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  outline: 0;
}

.editor-highlight code,
.editor-textarea,
.editor-lines {
  white-space: pre-wrap;
  font: normal normal 14px/1.4 monospace;
}

.editor-textarea {
  display: block;
  position: relative;
  overflow: hidden;
  resize: none;
  width: 100%;
  color: white;
  height: 250px;
  caret-color: hsl(50, 75%, 70%); /* But keep caret visible */
  border: 0;
  &:focus {
    outline: transparent;
  }
  &::selection {
    background: hsla(0, 100%, 75%, 0.2);
  }
}

.editor-highlight {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  user-select: none;
  margin-bottom: 0;
  min-width: 0;
}

.editor-lines {
  display: flex;
  flex-direction: column;
  text-align: right;
  height: max-content;
  min-height: 100%;
  color: hsl(0 100% 100% / 0.6);
  padding: var(--pad); /* use the same padding as .hilite */
  overflow: visible !important;
  background: hsl(0 100% 100% / 0.05);
  margin-bottom: 0;
  & span {
    counter-increment: linenumber;
    &::before {
      content: counter(linenumber);
    }
  }
}


/* highlight.js customizations: */

.hljs {
  background: none;
}
python python-3.x django django-rest-framework django-views
1个回答
0
投票

在比较 HTML 内容之前，您需要修改处理它们的方式。

我在您的 

process_file
函数中添加了一个新函数 (
function_comparison
)：

def function_comparison(request):
    context = {}
    if request.method == "GET":        
        user_form_data = request.GET.get("formData", None)
        with open('App1/templates/user_input.html', 'w') as outfile:
            outfile.write(user_form_data)
        file1 = open('App1/templates/source_compare.html', 'r').readlines()
        file2 = open('App1/templates/user_input.html', 'r').readlines()

        def process_file(file_lines):
            processed_lines = []
            for line in file_lines:              
                stripped_line = line.strip() # Remove spaces and newlines
                if stripped_line:  # Add the line only if it's not empty
                    processed_lines.append(stripped_line)
            return processed_lines

        file1_processed = process_file(file1)
        file2_processed = process_file(file2)

        htmlDiffer = difflib.HtmlDiff(linejunk=difflib.IS_LINE_JUNK, charjunk=difflib.IS_CHARACTER_JUNK)
        htmldiffs = htmlDiffer.make_file(file1_processed, file2_processed, context=True)

        if "No Differences Found" in htmldiffs:
            context["message"] = "Yes, it is the same!"
        else:
            context["message"] = "No, it is not the same!" if not settings.DEBUG else htmldiffs

    return JsonResponse(context, status=200)

正如您所看到的，对两个文件都进行了条带处理，因此两个文件中的空白行都被消除了。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.