CINXE.COM
Compare Text - Free online text compare tool to find text differences
<!DOCTYPE html> <html lang="en"> <head> <title> Compare Text - Free online text compare tool to find text differences </title> <meta name="keywords" content="compare text, text compare, string compare, compare strings, text comparison, compare files" /> <meta id="viewport" name="viewport" content="width=device-width" /> <meta name="description" content="Compare Text is an online text comparison tool to find text differences between two text files" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta property="fb:admins" content="506766675" /> <link rel="icon" href="/icon.svg" type="image/svg+xml" /> <meta property="og:type" content="website" /> <meta property="og:image:width" content="4270" /> <meta property="og:image:height" content="2135" /> <meta property="og:image" content="https://www.comparetext.net/images/compare-text-image.png" /> <style type="text/css"> /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ button, hr, input { overflow: visible; } progress, sub, sup { vertical-align: baseline; } [type='checkbox'], [type='radio'], legend { box-sizing: border-box; padding: 0; } html { line-height: 1.15; -webkit-text-size-adjust: 100%; } body { margin: 0; } details, main { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; height: 0; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bolder; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, select { text-transform: none; } [type='button'], [type='reset'], [type='submit'], button { -webkit-appearance: button; } [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring, button:-moz-focusring { outline: ButtonText dotted 1px; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { color: inherit; display: table; max-width: 100%; white-space: normal; } textarea { overflow: auto; } [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } [type='search']::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } [hidden], template { display: none; } </style> <style type="text/css"> body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; background-color: #f9fafb; } #header { background-color: #514ee9; min-height: 50px; padding-top: 7px; } .social-button-container { display: inline-block; } .social-button-container a { display: block; } #header .navigation { float: right; margin-left: 10px; margin-top: 10px; } h1 { margin: 0; font-weight: 500; font-size: 18px; padding: 10px 15px; float: left; } h1 a { text-decoration: none; color: #fafafa; } .wrap { margin: 0 auto; padding: 20px; position: relative; max-width: 960px; } #description { color: #fafafa; font-size: 14px; padding-top: 12px; z-index: 5; } @media screen and (max-width: 767px) { #description { display: none; } } #form-content { clear: both; } textarea { border: 1px solid #cccccc; } input[type='text'], textarea { border-radius: 4px; border: 1px solid #e0e5eb; font-size: 14px; outline: medium none; position: relative; z-index: 1; resize: none; } input[type='text']:hover, textarea:hover { border: 1px solid #A0B0C0; } .original textarea:focus, .changed textarea:focus { border: 2px solid #514EE9; padding: 17px !important; } .switch-button { background: #f9fafb; border: 1px solid #e0e5eb; padding-left: 8px; padding-right: 8px; padding-top: 3px; cursor: pointer; border-radius: 4px; margin: 0 auto; position: absolute; z-index: 10; left: 50%; margin-left: -19px; top: 330px; } .switch-button:hover { background: #e0e5eb; } .alternative { position: absolute; top: 350px; width: 100%; text-align: center; } #find-container { margin-top: 20px; width: 100%; } .modifiers-and-options { background: #edf0f3; border-radius: 8px; padding: 8px; width: auto; margin-top: 20px; margin-left: 20px; margin-right: 20px; } @media screen and (max-width: 767px) { .modifier-button.sort-lines, .modifier-button.replace-linebreaks, .modifier-button.to-lowercase { display: none; } } .modifier-button { transition: 0.3s; background: #ffffff; text-decoration: none; border: 1px solid #e0e6eb; border-radius: 4px; cursor: pointer; font-weight: 500; padding: 4px 8px; font-size: 12px; line-height: 15px; color: #52667a; } .modifier-button:hover { border-color: #a0b0c0; } .modifier-button .icon { float: left; margin-right: 5px; margin-top: 1px; margin-bottom: -1px; } @media screen and (max-width: 900px) { .modifier-button .icon { display: none; } } .modifier-button span { line-height: 21px; } .blue_button { background-color: #514ee9; margin: 0 auto; border-radius: 4px; border: 0; font-weight: 500; color: #ffffff; display: block; font-size: 16px; text-decoration: none; text-align: center; } #storage-options { font-size: 12px; height: 31px; color: #52667a; font-weight: 500; background-color: #fff; border: 1px solid #e0e6eb; padding: 7px; border-radius: 4px; } #dropdown-container { float: right; } .blue_button:hover { background-color: #3532e5; } .button.contact, .button.about { color: #d3d2f9; font-size: 14px; text-decoration: none; margin-right: 20px; } .button.about { margin-right: 20px; } #contactForm table { background: initial; } #results-content { margin-top: 10px; min-height: 200px; } #link-container { margin: 0 auto; padding-top: 5px; text-align: center; } #link-container a { color: default; } img { border: 0; } table { border-spacing: 0px; background: white; } table { margin: 0 auto; width: 99%; } pre table tr td:nth-child(2), pre table tr td:nth-child(5) { width: 50%; padding: 0; white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere; } td { vertical-align: top; } .modifiers { padding-left: 8px; color: #a0b0c0; } .modifiers svg { width: 12px; } .modifiers a { color: #a0b0c0; } .modifiers a:hover { color: black; } @media screen and (max-width: 767px) { .modifiers { display: none; } } .line-count { text-align: right; width: auto; padding: 0 4px; min-width: 0px; color: #a0b0c0; user-select: none; } #form-layout { width: 100%; } #top { background: #cccccc; width: 100%; border-bottom: 1px solid #333333; } #left, #right { font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace; } pre { font-size: 13px; line-height: 16px; font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace; } p.error { margin: 10px; font-size: 21px; } .find_difference { transition: 0.3s; position: relative; border-radius: 5px; cursor: pointer; font-size: 16px; padding: 20px 28px; height: auto; width: auto; margin-bottom: 30px; } .find_difference:hover { box-shadow: 0px 6px 9px rgba(82, 102, 122, 0.34), 0px 1.34018px 2.01027px rgba(82, 102, 122, 0.202676), 0px 0.399006px 0.598509px rgba(82, 102, 122, 0.137324); } .original, .changed { width: 50%; display: inline-block; white-space: normal; vertical-align: bottom; } .original textarea, .changed textarea { transition: border-color 0.3s; height: 380px; display: block; padding: 18px; box-sizing: border-box; width: 100%; } .diff-c { position: relative; white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word; line-height: 1rem; padding-right: 20px; display: table-cell; } .l-inserted { background: #abf2bc; } .l-removed { background: #ffc1c0; } .l-empty { background: rgba(234, 238, 242, 0.5); } .l-modified.l-with-inserts { background: #e6ffec; } .l-modified.l-with-removes { background: #ffebe9; } .c-inserted { border-radius: 4px; background: #abf2bc; } .c-removed { border-radius: 4px; background: #ffc1c0; } .l-top { border-top-left-radius: 4px; border-top-right-radius: 4px; } .l-bottom { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .loader { display: none; margin-top: -10px; margin-left: 55px; position: absolute; transform: translate(-50%, -50%); } .loading { margin-left: 200px; border: 4px solid #ccc; width: 20px; height: 20px; border-radius: 50%; border-top-color: #514ee9; border-left-color: #514ee9; animation: spin 1s infinite ease-in; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> <script src="https://www.google.com/recaptcha/api.js" async defer></script> </head> <body> <div id="header"> <h1> <a href="/"> <svg style="float: left; margin-top: -3px; margin-right: 7px; margin-left: 5px" width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M18.7679 13C19.5377 11.6667 21.4623 11.6667 22.2321 13L27.8612 22.75C28.631 24.0833 27.6688 25.75 26.1292 25.75H14.8708C13.3312 25.75 12.369 24.0833 13.1388 22.75L18.7679 13Z" fill="white" /> <path d="M12.2321 18C11.4623 19.3333 9.53775 19.3333 8.76795 18L3.13879 8.25C2.36899 6.91667 3.33124 5.25 4.87084 5.25L16.1292 5.25C17.6688 5.25 18.631 6.91667 17.8612 8.25L12.2321 18Z" fill="#202449" /> </svg> <span>CompareText</span> <span style="color: #d3d2f9; margin-left: -4px">.net</span> </a> </h1> <div class="navigation"> <a class="button contact" href="contact"><span>Contact</span></a> <a class="button about" href="about"><span>About</span></a> </div> <div id="description"> An online text comparison tool to find text differences between two text files. Enter the contents of two files and click 'Compare Text!' </div> </div> <div id="form-content"> <form enctype="multipart/form-data" method="post" action="/compare" name="diffform" style="position: relative"> <div style="font-size: 0; padding-top: 20px"> <div class="original"> <div style="width: auto; padding-left: 20px; padding-right: 10px"> <textarea autofocus name="left" id="left" class="lined" placeholder="Paste the first version of your text here" > </textarea > </div> </div> <div class="changed"> <div style="width: auto; padding-left: 10px; padding-right: 20px"> <textarea name="right" id="right" class="lined" placeholder="Paste the second version of your text here"> </textarea > </div> </div> </div> <div style="width: 100%"> <button aria-label="Switch values" onclick="switchValues(); return false;" class="switch-button"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 13L16 13M16 13L13 10M16 13L13 16" stroke="#52667A" stroke-width="1.25" stroke-linecap="round" /> <path d="M16 7L4 7M4 7L7 10M4 7L7 4" stroke="#52667A" stroke-width="1.25" stroke-linecap="round" /> </svg> </button> </div> <div class="modifiers-and-options"> <div style="float: right"> <a class="modifier-button" style="float: right; margin-left: 8px" href="/"> <svg class="icon" width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M6 13.5L13 6.5M6 6.5L13 13.5" stroke="#52667A" stroke-width="1.25" stroke-linecap="round" /> </svg> <span>Clear</span> </a> <div id="dropdown-container"> <select id="storage-options" name="storage-options"> <option value="no">Don't store</option> <option value="hour">Store for 1 hour</option> <option value="day">Store for 1 day</option> <option value="month">Store for 1 month</option> <option value="forever">Store forever</option> </select> </div> </div> <button class="modifier-button sort-lines" style="margin-right: 4px" onclick="selectTool('sortLines'); return false;" > <svg class="icon" width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 4.5V16.5M5 16.5L8 13.5M5 16.5L2 13.5M8 4.5H18M8 7.5H15M8 10.5H12" stroke="#52667A" stroke-width="1.25" stroke-linecap="round" /> </svg> <span>Sort lines</span> </button> <button class="modifier-button to-lowercase" style="margin-right: 4px" onclick="selectTool('toLowercase'); return false;" > <svg class="icon" width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 14C12 15.3807 10.8807 16.5 9.5 16.5C8.11929 16.5 7 15.3807 7 14C7 12.6193 8.11929 11.5 9.5 11.5C10.8807 11.5 12 12.6193 12 14ZM12 14V16.5" stroke="#52667A" stroke-width="1.25" stroke-linecap="round" /> <path d="M10 9.5L8 7.5M10 9.5L12 7.5M10 9.5L10 5.5" stroke="#52667A" stroke-width="1.25" stroke-linecap="round" /> </svg> <span>To lowercase</span> </button> <button class="modifier-button replace-linebreaks" style="margin-right: 4px" onclick="selectTool('replaceLineBreaksWithSpaces'); return false;" > <svg class="icon" width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 9V13.5H14.5M14.5 13.5L13 15M14.5 13.5L13 12M8 9.5L12 5.5M8 5.5L12 9.5" stroke="#52667A" stroke-width="1.25" stroke-linecap="round" /> </svg> <span>Replace line breaks with spaces</span> </button> <button class="modifier-button trim-whitespace" onclick="selectTool('trimWhitespace'); return false;"> <svg class="icon" width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 3.5V17.5" stroke="#52667A" stroke-width="1.25" stroke-linecap="round" /> <path d="M15 3.5V17.5" stroke="#52667A" stroke-width="1.25" stroke-linecap="round" /> <rect x="7" y="5.5" width="6" height="10" rx="1" stroke="#52667A" stroke-width="1.25" stroke-linecap="round" /> </svg> <span>Trim whitespace</span> </button> </div> <div id="find-container" style="position: relative"> <button type="submit" class="blue_button find_difference" value="" onclick="spinner()"> <span>Compare Text</span> <div class="loader"> <div class="loading"></div> </div> </button> </div> </form> </div> <script type="text/javascript"> function switchValues() { var left = document.getElementById('left'); var right = document.getElementById('right'); var leftValue = left.value; var rightValue = right.value; left.value = rightValue; right.value = leftValue; } function selectTool(type) { var left = document.getElementById('left'); var right = document.getElementById('right'); var leftValue = left.value; var rightValue = right.value; switch (type) { case 'toLowercase': var newLeftValue = leftValue.toLowerCase(); var newRightValue = rightValue.toLowerCase(); break; case 'sortLines': var sortLines = (text) => text.split('\n').sort().join('\n'); var newLeftValue = sortLines(leftValue); var newRightValue = sortLines(rightValue); break; case 'replaceLineBreaksWithSpaces': var replace = (text) => text.replace(/(\n|\r\n)/g, ' '); var newLeftValue = replace(leftValue); var newRightValue = replace(rightValue); break; case 'trimWhitespace': var trimLines = (text) => text .split('\n') .map((line) => line.trim()) .filter((line) => line !== '') .join('\n'); var newLeftValue = trimLines(leftValue); var newRightValue = trimLines(rightValue); break; } left.value = newLeftValue; right.value = newRightValue; } function spinner() { document.getElementsByClassName('loader')[0].style.display = 'block'; } </script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-YH25QEXWH5"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-YH25QEXWH5'); </script> </body> </html>