logo标签列表

Java: 在Java中比较、标记和解释HTML文本

javahtmlstringstring-comparison
11

我正在处理一个Java项目，在其中有一个HTML编辑器，用户可以在html编辑器（ckeditor）中输入文本，并将实际的HTML文本保存在数据库中。

现在，当用户下一次再次编辑相同的文本时，我想通过与数据库进行比较来显示两者之间的差异。

我目前遇到的最重要的问题是，即使任何比较工具知道斜体样式已更改为粗体，比较器的输出也是用删除线划掉单词Italic并显示Bold插入在那个位置。

但这并不能解释实际编辑的意图或行动。用户的意图/行动是将其从斜体变为粗体。我要寻找的工具是，而不是显示删除单词Italic并在其位置添加Bold，它将显示先是被strikethrough的Italic单词/句子，然后是其替换的Bold单词/句子。

我希望我的意思是清楚的。我已经尝试了相当长一段时间，但仍未能实现。我尝试过diff_match_patch、daisydiff等，但都没有帮助。

我的尝试：

/*

            String oldTextHtml = mnotes1.getMnotetext();
            String newTextHTML = mnotes.getMnotetext();


            oldTextHtml = oldTextHtml.replace("<br>","\n");
            oldTextHtml = Jsoup.clean(oldTextHtml, Whitelist.basic());
           oldTextHtml = Jsoup.parse(oldTextHtml).text();

            newTextHTML = newTextHTML.replace("<br>","\n");
            newTextHTML = Jsoup.clean(newTextHTML,Whitelist.basic());
            newTextHTML = Jsoup.parse(newTextHTML).text();


            diff_match_patch diffMatchPatch = new diff_match_patch();
            LinkedList<diff_match_patch.Diff> deltas = diffMatchPatch.diff_main(oldTextHtml, newTextHTML);
            diffMatchPatch.diff_cleanupSemantic(deltas);
            newText += diffMatchPatch.diff_prettyHtml(deltas);
            groupNoteHistory.setWhatHasChanged("textchange");
            groupNoteHistory.setNewNoteText(newText);
            noEdit = true;
*/


           List<String> oldTextList = Arrays.asList(mnotes1.getMnotetext().split("(\\.|\\n)"));
            List<String> newTextList = Arrays.asList(mnotes.getMnotetext().split("(\\.|\\n)"));
            if (oldTextList.size() == newTextList.size()) {

                for (int current = 0; current < oldTextList.size(); current++) {
                    if (isLineDifferent(oldTextList.get(current), newTextList.get(current))) {
                        noEdit = true;
                        diff_match_patch diffMatchPatch = new diff_match_patch();
                        LinkedList<diff_match_patch.Diff> deltas = diffMatchPatch.diff_main(oldTextList.get(current), newTextList.get(current));
                        diffMatchPatch.diff_cleanupSemantic(deltas);
                        newText += diffMatchPatch.diff_prettyHtml(deltas);
                        groupNoteHistory.setWhatHasChanged("textchange");
                        groupNoteHistory.setNewNoteText(newText);
                    }
                }
            } else {
                if (!(mnotes.getMnotetext().equals(mnotes1.getMnotetext()))) {
                    if (isLineDifferent(mnotes1.getMnotetext(), mnotes.getMnotetext())) {
                        diff_match_patch diffMatchPatch = new diff_match_patch();

                        LinkedList<diff_match_patch.Diff> deltas = diffMatchPatch.diff_main(mnotes1.getMnotetext(),
                                mnotes.getMnotetext());
                        diffMatchPatch.diff_cleanupSemantic(deltas);
                        newText += diffMatchPatch.diff_prettyHtml(deltas);
                        groupNoteHistory.setWhatHasChanged("textchange");
                        noEdit = true;
                    }
                    groupNoteHistory.setNewNoteText(newText);
                    groupNoteHistory.setWhatHasChanged("textchange");
                }
            }

如果有人知道我如何实现这一点，请告诉我。非常感谢。:-)

编辑

有人要求提供一张图片。解释和图片如下。

Old text : <style= bold>Hello</style>
new Text : <style = Italic>Hello</style>

预期的差异输出：

如此图像中所示。

3
我没有投票支持关闭这个问题，但我认为有人可能会主张关闭它，因为你字面上说：我正在寻找的是一种工具，在SO上直接询问工具是不被允许的。 - Bram Vanroy
也许可以尝试使用：https://github.com/ibakayoko/ckeditor_track_changes （顺便提一下，如果你点击关闭，你就能看到原因） - user180100
1
希望我的意思清楚明白。你说你有工具可以“划掉”单词“斜体”，并显示插入了“粗体”代替它，然后你想要“先展示被划掉的‘斜体’单词/句子，再展示被‘粗体’单词/句子替换后的结果”。我不认为它们之间有什么真正的区别。也许你可以提供一些样例输入和期望输出的示例？ - aroth
@aroth：我会尽快创建一些图片并发布。 - We are Borg
我认为这是一个非常有趣的问题。你的问题几乎是无限复杂的。核心问题：你的程序应该能够理解什么？（HTML版本？CSS也包括在内吗？）什么应该被视为相同，什么应该被视为不同？一种方法可能是：首先将你的HTML转换为字符列表以及它们的属性。然后进行差异比较。然后将你的差异结果转换为你想要向用户显示的内容。 - Matthias Ronge
显示剩余12条评论
3个回答
3

最近我对一个开源库进行了概念探究，该库在java上实现了diff命令和其他许多功能。

基本上我比较了两个java文件，并获得了它们之间修改的行，在这些信息的基础上，我认为可以轻松地实现您想要的功能。

基本上我有两个java文件位于 src/test/resources/files 文件夹下：

File1

package com.onuba.car.javadiff;

import difflib.Chunk;
import difflib.Delta;
import difflib.DiffUtils;
import difflib.Patch;

import java.io.BufferedReader;
import java.io.File;
import java.io.FileReader;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

public class FileComparator {

    private final File original;

    private final File revised;

    public FileComparator(File original, File revised) {
        this.original = original;
        this.revised = revised;
    }

    public List<Chunk> getChangesFromOriginal() throws IOException {
        return getChunksByType(Delta.TYPE.CHANGE);
    }

    public List<Chunk> getInsertsFromOriginal() throws IOException {
        return getChunksByType(Delta.TYPE.INSERT);
    }

    public List<Chunk> getDeletesFromOriginal() throws IOException {
        return getChunksByType(Delta.TYPE.DELETE);
    }

    private List<Chunk> getChunksByType(Delta.TYPE type) throws IOException {
        final List<Chunk> listOfChanges = new ArrayList<Chunk>();
        final List<Delta> deltas = getDeltas();
        for (Delta delta : deltas) {
            if (delta.getType() == type) {
                listOfChanges.add(delta.getRevised());
            }
        }
        return listOfChanges;
    }

    private List<Delta> getDeltas() throws IOException {

        final List<String> originalFileLines = fileToLines(original);
        final List<String> revisedFileLines = fileToLines(revised);

        final Patch patch = DiffUtils.diff(originalFileLines, revisedFileLines);

        return patch.getDeltas();
    }

    private List<String> fileToLines(File file) throws IOException {
        final List<String> lines = new ArrayList<String>();
        String line;
        final BufferedReader in = new BufferedReader(new FileReader(file));
        while ((line = in.readLine()) != null) {
            lines.add(line);
        }

        return lines;
    }

    <style= bold>Hello</style>

}

文件2

package com.onuba.car.javadiff;

import difflib.Chunk;
import difflib.Delta;
import difflib.DiffUtils;
import difflib.Patch;

import java.io.BufferedReader;
import java.io.File;
import java.io.FileReader;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

public class FileComparator {

    private final File original;

    private final File revised;

    public FileComparator(File original, File revised) {
        this.original = original;
        this.revised = revised;
    }

    public List<Chunk> getChangesFromOriginal() throws IOException {
        return getChunksByType(Delta.TYPE.CHANGE);
    }

    public List<Chunk> getInsertsFromOriginal() throws IOException {
        return getChunksByType(Delta.TYPE.INSERT);
    }

    public List<Chunk> getDeletesFromOriginal() throws IOException {
        return getChunksByType(Delta.TYPE.DELETE);
    }

    private List<Chunk> getChunksByType(Delta.TYPE type) throws IOException {
        final List<Chunk> listOfChanges = new ArrayList<Chunk>();
        final List<Delta> deltas = getDeltas();
        for (Delta delta : deltas) {
            if (delta.getType() == type) {
                listOfChanges.add(delta.getRevised());
            }
        }
        return listOfChanges;
    }

    private List<Delta> getDeltas(String nuevoParam) throws IOException {

        final List<String> originalFileLines = fileToLines(original);
        final List<String> revisedFileLines = fileToLines(revised);

        final Patch patch = DiffUtils.diff(originalFileLines, revisedFileLines);

        return patch.getDeltas();
    }

    private List<String> fileToLines(File file, String nuevoParam) throws IOException {
        final List<String> lines = new ArrayList<String>();
        String line;
        final BufferedReader in = new BufferedReader(new FileReader(file));
        while ((line = in.readLine()) != null) {
            lines.add(line);
        }

        return lines;
    }

    <style = Italic>Hello</style>

    private void nuevoMetodoCool(File file) {

    }

}

一个简短的文件比较器类（记住它只是一个概念验证 :D）
package com.onuba.car.javadiff;

import difflib.Chunk;
import difflib.Delta;
import difflib.DiffUtils;
import difflib.Patch;

import java.io.BufferedReader;
import java.io.File;
import java.io.FileReader;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

public class FileComparator {

    private final File original;

    private final File revised;

    public FileComparator(File original, File revised) {
        this.original = original;
        this.revised = revised;
    }

    public List<Chunk> getChangesFromOriginal() throws IOException {
        return getChunksByType(Delta.TYPE.CHANGE);
    }

    public List<Chunk> getInsertsFromOriginal() throws IOException {
        return getChunksByType(Delta.TYPE.INSERT);
    }

    public List<Chunk> getDeletesFromOriginal() throws IOException {
        return getChunksByType(Delta.TYPE.DELETE);
    }

    private List<Chunk> getChunksByType(Delta.TYPE type) throws IOException {
        final List<Chunk> listOfChanges = new ArrayList<Chunk>();
        final List<Delta> deltas = getDeltas();
        for (Delta delta : deltas) {
            if (delta.getType() == type) {
                listOfChanges.add(delta.getRevised());
            }
        }
        return listOfChanges;
    }

    private List<Delta> getDeltas() throws IOException {

        final List<String> originalFileLines = fileToLines(original);
        final List<String> revisedFileLines = fileToLines(revised);

        final Patch patch = DiffUtils.diff(originalFileLines, revisedFileLines);

        return patch.getDeltas();
    }

    private List<String> fileToLines(File file) throws IOException {
        final List<String> lines = new ArrayList<String>();
        String line;
        final BufferedReader in = new BufferedReader(new FileReader(file));
        while ((line = in.readLine()) != null) {
            lines.add(line);
        }

        return lines;
    }

}

还需要为此编写一个 Junit 测试

package com.onuba.car.javadiff.test;

import static org.junit.Assert.fail;

import java.io.File;
import java.io.IOException;
import java.util.List;

import org.junit.Test;

import com.everis.car.javadiff.FileComparator;

import difflib.Chunk;

public class FileComparatorTest {

    private final File original = new File("./src/test/resources/files/FileComparatorv1.java");

    private final File revised = new File("./src/test/resources/files/FileComparatorv2.java");

    @Test
    public void shouldGetChangesBetweenFiles() {

        final FileComparator comparator = new FileComparator(original, revised);

        try {
            final List<Chunk> changesFromOriginal = comparator.getChangesFromOriginal();

            final int changeNum = changesFromOriginal.size();
            System.out.println("Tamaño de cambios: " + changeNum);

            for (int i = 0; i < changeNum; i++) {

                final Chunk change = changesFromOriginal.get(i);
                final int firstLineOfFirstChange = change.getPosition() + 1;
                final int changeSize = change.size();
                //final String changeText = change.getLines().get(0).toString();

                System.out.println("Cambio nº " + i);
                System.out.println("firstLineOfFirstChange: " + firstLineOfFirstChange);
                System.out.println("changeSize: " + changeSize);
                System.out.println("change text: ");
                showTest(change.getLines());

            }

            /*assertEquals(3, changesFromOriginal.size());

            final Chunk firstChange = changesFromOriginal.get(0);
            final int firstLineOfFirstChange = firstChange.getPosition() + 1;
            final int firstChangeSize = firstChange.size();
            assertEquals(2, firstLineOfFirstChange);
            assertEquals(1, firstChangeSize);
            final String firstChangeText = firstChange.getLines().get(0).toString();
            assertEquals("Line 3 with changes", firstChangeText);

            final Chunk secondChange = changesFromOriginal.get(1);
            final int firstLineOfSecondChange = secondChange.getPosition() + 1;
            final int secondChangeSize = secondChange.size();
            assertEquals(4, firstLineOfSecondChange);
            assertEquals(2, secondChangeSize);
            final String secondChangeFirstLineText = secondChange.getLines().get(0).toString();
            final String secondChangeSecondLineText = secondChange.getLines().get(1).toString();
            assertEquals("Line 5 with changes and", secondChangeFirstLineText);
            assertEquals("a new line", secondChangeSecondLineText);

            final Chunk thirdChange = changesFromOriginal.get(2);
            final int firstLineOfThirdChange = thirdChange.getPosition() + 1;
            final int thirdChangeSize = thirdChange.size();
            assertEquals(11, firstLineOfThirdChange);
            assertEquals(1, thirdChangeSize);
            final String thirdChangeText = thirdChange.getLines().get(0).toString();
            assertEquals("Line 10 with changes", thirdChangeText);*/

        } catch (IOException ioe) {
            fail("Error running test shouldGetChangesBetweenFiles " + ioe.toString());
        }
    }

    @Test
    public void shouldGetInsertsBetweenFiles() {

        final FileComparator comparator = new FileComparator(original, revised);

        try {
            final List<Chunk> insertsFromOriginal = comparator.getInsertsFromOriginal();

            final int changeNum = insertsFromOriginal.size();
            System.out.println("Tamaño de inserciones: " + changeNum);

            for (int i = 0; i < changeNum; i++) {

                final Chunk change = insertsFromOriginal.get(i);
                final int firstLineOfFirstChange = change.getPosition() + 1;
                final int changeSize = change.size();
                //final String changeText = change.getLines().get(0).toString();

                System.out.println("insercion nº " + i);
                System.out.println("firstLineOfFirstInsertion: " + firstLineOfFirstChange);
                System.out.println("insertion Size: " + changeSize);
                System.out.println("insertion text: ");
                showTest(change.getLines());

            }
        } catch (IOException ioe) {
            fail("Error running test shouldGetInsertsBetweenFiles " + ioe.toString());
        }
        /*try {
            final List<Chunk> insertsFromOriginal = comparator.getInsertsFromOriginal();
            assertEquals(1, insertsFromOriginal.size());

            final Chunk firstInsert = insertsFromOriginal.get(0);
            final int firstLineOfFirstInsert = firstInsert.getPosition() + 1;
            final int firstInsertSize = firstInsert.size();
            assertEquals(7, firstLineOfFirstInsert);
            assertEquals(1, firstInsertSize);
            final String firstInsertText = firstInsert.getLines().get(0).toString();
            assertEquals("new line 6.1", firstInsertText);

        } catch (IOException ioe) {
            fail("Error running test shouldGetInsertsBetweenFiles " + ioe.toString());
        }*/
    }

    @Test
    public void shouldGetDeletesBetweenFiles() {

        final FileComparator comparator = new FileComparator(original, revised);

        try {
            final List<Chunk> deletesFromOriginal = comparator.getDeletesFromOriginal();

            final int changeNum = deletesFromOriginal.size();
            System.out.println("Tamaño de deletes: " + changeNum);

            for (int i = 0; i < changeNum; i++) {

                final Chunk change = deletesFromOriginal.get(i);
                final int firstLineOfFirstChange = change.getPosition() + 1;
                final int changeSize = change.size();
                //final String changeText = change.getLines().get(0).toString();

                System.out.println("delete nº " + i);
                System.out.println("firstLineOfFirstDelete: " + firstLineOfFirstChange);
                System.out.println("delete Size: " + changeSize);
                System.out.println("delete text: ");
                showTest(change.getLines());

            }
        } catch (IOException ioe) {
            fail("Error running test shouldGetInsertsBetweenFiles " + ioe.toString());
        }

        /*try {
            final List<Chunk> deletesFromOriginal = comparator.getDeletesFromOriginal();
            assertEquals(1, deletesFromOriginal.size());

            final Chunk firstDelete = deletesFromOriginal.get(0);
            final int firstLineOfFirstDelete = firstDelete.getPosition() + 1;
            assertEquals(1, firstLineOfFirstDelete);

        } catch (IOException ioe) {
            fail("Error running test shouldGetDeletesBetweenFiles " + ioe.toString());
        }*/
    }

    private void showTest(List<?> texts) {

        if (texts != null) {
            for (Object s : texts) {
                System.out.println(s.toString());
            }
        }
    }
}

最后是我的pom.xml文件

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.onuba.car</groupId>
    <artifactId>javadiffpoc</artifactId>
    <version>1.0.0-SNAPSHOT</version>
    <packaging>jar</packaging>
    <name>JavaDiff ::  POC</name>

    <url>http://maven.apache.org</url>

    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.11</version>
            <scope>test</scope>
        </dependency>

        <!-- GUAVA -->
        <dependency>
            <groupId>com.google.guava</groupId>
            <artifactId>guava</artifactId>
            <version>15.0</version>
        </dependency>

        <dependency>
            <groupId>com.googlecode.java-diff-utils</groupId>
            <artifactId>diffutils</artifactId>
            <version>1.2.1</version>
        </dependency>

        <!-- Logger -->
        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-classic</artifactId>
            <version>1.0.0</version>
        </dependency>
        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-access</artifactId>
            <version>1.0.0</version>
        </dependency>
        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-core</artifactId>
            <version>1.0.0</version>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>1.6.4</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <artifactId>maven-jar-plugin</artifactId>
                <version>2.4</version>
            </plugin>
        </plugins>
    </build>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
</project>

抱歉有些日志和一些小细节是用西班牙语写的:D，也许通过这个你可以达到你想要的目的。
该库主页：https://code.google.com/p/java-diff-utils/页面末尾有教程链接（为西班牙语）。
希望可以帮到你！
更新：
我写了一个简单的类，可以生成具有删除线差异的文件，代码如下（我不太了解你所需的格式，如果需要，可以添加更多装饰符）：
package com.onuba.car.javadiff;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.RandomAccessFile;
import java.util.ArrayList;
import java.util.List;

import difflib.Chunk;

public class Comparer {

    private final File original = new File("./src/test/resources/files/FileComparatorv1.java");

    private final File revised = new File("./src/test/resources/files/FileComparatorv2.java");

    public static void main(String[] args) {

        final Comparer comparer = new Comparer();

        comparer.createDiffFile();
    }

    private void createDiffFile() {

        PrintWriter diffFile = null;
        //RandomAccessFile diffFile = null;
        RandomAccessFile oldFile = null;

        try {

            //diffFile = new RandomAccessFile(new File("./diffFile_" + System.currentTimeMillis()), "rw");
            diffFile = new PrintWriter("./diffFile_" + System.currentTimeMillis(), "UTF-8");
            oldFile = new RandomAccessFile(original, "r");

            final FileComparator comparator = new FileComparator(original, revised);

            final List<Chunk> changesFromOriginal = comparator.getChangesFromOriginal();

            final int changeNum = changesFromOriginal.size();
            System.out.println("Tamaño de cambios: " + changeNum);

            final List<Integer> changesIndex = new ArrayList<Integer>();

            for (Chunk change : changesFromOriginal) {

                changesIndex.add(change.getPosition());
            }

            String line = oldFile.readLine();
            int lineIndex = 0;
            while (line != null) {

                if (changesIndex.contains(lineIndex)) {

                    String strikeLine = "From: <strike-through color=yellow>" + line + "</strike-through>"; 
                diffFile.print(strikeLine + " To: <strong>");

                for (Object s : changesFromOriginal.get(changesIndex.indexOf(lineIndex)).getLines()) {
                    diffFile.println(s.toString());
                }
                diffFile.print("</strong>");

                } else {

                    diffFile.println(line);
                }

                line = oldFile.readLine();
                lineIndex++;
            }

        } catch (IOException e) {

        } finally {
            try {
                if (diffFile != null) {
                    diffFile.close();
                }

                if (oldFile != null) {
                    oldFile.close();
                }
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
    }
}

输出文件为：
package com.onuba.car.javadiff;

import difflib.Chunk;
import difflib.Delta;
import difflib.DiffUtils;
import difflib.Patch;

import java.io.BufferedReader;
import java.io.File;
import java.io.FileReader;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

public class FileComparator {

    private final File original;

    private final File revised;

    public FileComparator(File original, File revised) {
        this.original = original;
        this.revised = revised;
    }

    public List<Chunk> getChangesFromOriginal() throws IOException {
        return getChunksByType(Delta.TYPE.CHANGE);
    }

    public List<Chunk> getInsertsFromOriginal() throws IOException {
        return getChunksByType(Delta.TYPE.INSERT);
    }

    public List<Chunk> getDeletesFromOriginal() throws IOException {
        return getChunksByType(Delta.TYPE.DELETE);
    }

    private List<Chunk> getChunksByType(Delta.TYPE type) throws IOException {
        final List<Chunk> listOfChanges = new ArrayList<Chunk>();
        final List<Delta> deltas = getDeltas();
        for (Delta delta : deltas) {
            if (delta.getType() == type) {
                listOfChanges.add(delta.getRevised());
            }
        }
        return listOfChanges;
    }

From: <strike-through color=yellow>    private List<Delta> getDeltas() throws IOException {</strike-through> To: <strong>    private List<Delta> getDeltas(String nuevoParam) throws IOException {
</strong> 
        final List<String> originalFileLines = fileToLines(original);
        final List<String> revisedFileLines = fileToLines(revised);

        final Patch patch = DiffUtils.diff(originalFileLines, revisedFileLines);

        return patch.getDeltas();
    }

From: <strike-through color=yellow>    private List<String> fileToLines(File file) throws IOException {</strike-through> To: <strong>    private List<String> fileToLines(File file, String nuevoParam) throws IOException {
</strong>        final List<String> lines = new ArrayList<String>();
        String line;
        final BufferedReader in = new BufferedReader(new FileReader(file));
        while ((line = in.readLine()) != null) {
            lines.add(line);
        }

        return lines;
    }

From: <strike-through color=yellow>    <style= bold>Hello</style></strike-through> To: <strong>    <style = Italic>Hello</style>

    private void nuevoMetodoCool(File file) {

    }
</strong> 
}

你觉得这对你有用吗？

我会查看并保持更新。非常感谢。 :-) - We are Borg
好的，你能解释一下你的代码是如何解决这个问题的吗？你是如何突出显示差异并进行解释的？据我所知，你只是使用了java-diff-utils来获取差异，而这也可以通过diff_match_patch实现。你的代码有什么改变吗？ - We are Borg
是的，我只获取文件差异。我没有显示任何内容，这超出了我的POC范围，我认为这可能对你有所帮助。一旦你有了差异，将这些差异显示出来应该不难，对吧？让我试一试。 - Francisco Hernandez
这才是真正的问题，解释这种差异，你目前所取得的成就只是已经存在的东西，而且最重要的是它只适用于纯文本。 - We are Borg
我更新了我的答案，加入了一个类来生成一个带有旧文本删除线的差异文件，希望能够帮到你。 - Francisco Hernandez
显示剩余6条评论
1
我建议您采用略微不同的方法来解决问题。HTML5有一个“data”属性，您可以在其中添加有关该特定元素的自己的信息。这个数据标记是完全符合HTML5标准的。您可以在保存到数据库时将HTML元素状态存储在其中。稍后，当用户对其进行修改时，您可以将标记的当前元素数据与您已经存储在“data”属性中的数据进行比较。
请查看此网址，了解“data”属性的详细信息。http://www.sitepoint.com/use-html5-data-attributes/
与我们的JS、HTML开发人员交谈后得知，这种方法行不通，因为更改可能会很多，这将导致需要检查很多组合。即使文本相对于HTML元素的大小发生了变化（这是常见的情况），这也无济于事。 - We are Borg
我有类似的项目，这就是我所做的。最初它可能看起来很复杂，但一旦你实施了它，它会变得非常容易。你可能想尝试 POC。 - Gajendra Naidu
1
如果我理解正确，您只想以 <old> <new> 的形式显示更改，其中 <old> 带有删除线。您不想保存它们。
为此，您可以首先构建旧版和新版html代码的语法树。然后比较这些树的对应节点。当您找到两个不同的节点时，您已经找到了一个更改。现在您想显示旧版本带有 strikethrough 和新版本，是吗？因此，您只需采用添加了 strikethrough 的旧节点的代码，并在其旁边使用新节点的代码即可。
编辑： 我编写了一些代码，基本上实现了这一点。请注意，尽管我非常快速地编写了它，但它并不太容易阅读，也不完全完成。但是，明天将关闭此问题，所以我认为最好比没有好。希望能对您有所帮助 :)
GitHub上的代码
是的，我知道这个问题，你有任何实现方法吗？如果其中一棵树为空，另一棵树是满的，怎么办...这有许多排列组合...你有可用的代码吗？谢谢。 - We are Borg
如果一个节点在一棵树中缺失，在另一棵树中出现，那么它可能被删除或添加，具体取决于树的情况。还有其他可能出现的情况吗？ - Tobias
其他情况包括文本更改，用户添加无序列表或有序列表，更改其类型等。 列表是主要问题之一。 - We are Borg
我认为更改文本没有问题。您希望如何显示列表更改？ - Tobias
每个HTML标签是否可以添加一个ID？ - Tobias
你理解了吗？这有帮助吗？再次抱歉代码风格不好。 - Tobias
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接