Compare.php

<!DOCTYPE html>
<html>

<head>
    <title>文本内容对比</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background-color: #222;
            color: #fff;
        }

        .container {
            flex: 1;
            display: flex;
            flex-direction: row;
            height: 100%;
            align-items: stretch;
        }

        .column {
            flex: 1;
            border: 1px solid #ccc;
            padding: 10px;
            box-sizing: border-box;
            background-color: #333;
            display: flex;
            flex-direction: column;
        }

        textarea {
            flex: 1;
            width: 100%;
            box-sizing: border-box;
            padding: 5px;
        }

        .diff-column {
            overflow-y: auto;
            padding: 10px;
            background-color: #444;
            flex: 1;
        }

        .diff-item {
            margin-bottom: 10px;
        }

        .diff-line {
            font-weight: bold;
        }

        .button-container {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
        }

        .compare-button {
            padding: 5px 10px;
            background-color: #555;
            color: #fff;
        }

        footer {
            text-align: center;
            padding-top: 10px;
            background-color: #333;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="column">
            <h2>原文本</h2>
            <textarea id="leftContent" rows="10"></textarea>
        </div>

        <div class="column">
            <h2>新文本</h2>
            <textarea id="rightContent" rows="10"></textarea>
        </div>

        <div class="column diff-column" id="diffResults">
            <div class="button-container">
                <button class="compare-button" onclick="compareText()">对比</button>
            </div>
            <h2>差异行及内容</h2>
        </div>
    </div>

    <footer>&copy; 2023 https://snote.cn/. All rights reserved.</footer>

    <script>
        function compareText() {
            var leftContent = document.getElementById('leftContent').value;
            var rightContent = document.getElementById('rightContent').value;

            var leftLines = leftContent.split("\n");
            var rightLines = rightContent.split("\n");
            var diffLines = [];

            for (var i = 0; i < leftLines.length; i++) {
                if (leftLines[i] !== rightLines[i]) {
                    diffLines.push({
                        lineNumber: i + 1,
                        leftLine: leftLines[i],
                        rightLine: rightLines[i]
                    });
                }
            }

            var diffResults = document.getElementById('diffResults');
            diffResults.innerHTML = '<div class="button-container"><button class="compare-button" onclick="compareText()">对比</button></div><h2>差异行及内容</h2>';

            if (diffLines.length > 0) {
                diffLines.forEach(function (line) {
                    diffResults.innerHTML += '<div class="diff-item"><div class="diff-line">行号: ' + line.lineNumber + '</div><div>原文本: ' + line.leftLine + '</div><div>新文本: ' + line.rightLine + '</div></div>';
                });
            } else {
                diffResults.innerHTML += '<div>没有差异行</div>';
            }
        }
    </script>
</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

<!DOCTYPE html>

<html>

<head>

<title>文本内容对比</title>

<style>

body {

margin: 0;

padding: 0;

display: flex;

flex-direction: column;

min-height: 100vh;

background-color: #222;

color: #fff;

}

.container {

flex: 1;

display: flex;

flex-direction: row;

height: 100%;

align-items: stretch;

}

.column {

flex: 1;

border: 1px solid #ccc;

padding: 10px;

box-sizing: border-box;

background-color: #333;

display: flex;

flex-direction: column;

}

textarea {

flex: 1;

width: 100%;

box-sizing: border-box;

padding: 5px;

}

.diff-column {

overflow-y: auto;

padding: 10px;

background-color: #444;

flex: 1;

}

.diff-item {

margin-bottom: 10px;

}

.diff-line {

font-weight: bold;

}

.button-container {

display: flex;

justify-content: center;

margin-bottom: 10px;

}

.compare-button {

padding: 5px 10px;

background-color: #555;

color: #fff;

}

footer {

text-align: center;

padding-top: 10px;

background-color: #333;

}

</style>

</head>

<body>

</div>

</div>

</div>

<h2>差异行及内容</h2>

</div>

function compareText() {

var leftContent = document.getElementById('leftContent').value;

var rightContent = document.getElementById('rightContent').value;

var leftLines = leftContent.split("\n");

var rightLines = rightContent.split("\n");

var diffLines = [];

for (var i = 0; i < leftLines.length; i++) {

if (leftLines[i] !== rightLines[i]) {

diffLines.push({

lineNumber: i + 1,

leftLine: leftLines[i],

rightLine: rightLines[i]

});

}

var diffResults = document.getElementById('diffResults');

diffResults.innerHTML = '<div class="button-container"><button class="compare-button" onclick="compareText()">对比</button></div><h2>差异行及内容</h2>';

if (diffLines.length > 0) {

diffLines.forEach(function (line) {

diffResults.innerHTML += '<div class="diff-item"><div class="diff-line">行号: ' + line.lineNumber + '</div><div>原文本: ' + line.leftLine + '</div><div>新文本: ' + line.rightLine + '</div></div>';

});

} else {

diffResults.innerHTML += '<div>没有差异行</div>';

}

</script>

</body>

</html>

发表回复 取消回复

发表回复取消回复