<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Скрипт для поиска дубликатов в строках. Сопоставление строк — максимум по подстрокам</title>
<style>
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; padding:20px; line-height:1.4; }
textarea { width:100%; min-height:140px; box-sizing:border-box; padding:8px; font-family:inherit; }
.cols { display:flex; gap:16px; margin-bottom:12px; }
.col { flex:1; }
button { padding:8px 12px; font-size:1rem; }
table { width:100%; border-collapse:collapse; margin-top:16px; }
th, td { border:1px solid #ddd; padding:8px; text-align:left; vertical-align:top; }
mark { background:#ffea8a; }
.small { font-size:0.9rem; color:#555; margin-top:8px; }
.result-note { margin-top:12px; color:#333; }
.muted { color:#666; font-size:0.95rem; }
</style>
</head>
<body>
<h1>Для каждой строки из списка 1 — лучшие совпадения из списка 2</h1>
<div class="cols">
<div class="col">
<label for="left">Меньший список. (подмножество) Список 1 — по одной строке на ввод</label>
<textarea id="left" placeholder="Строка A1
Строка A2
..."></textarea>
</div>
<div class="col">
<label for="right">Больший список. (множество) Список 2 — по одной строке на ввод</label>
<textarea id="right" placeholder="Строка B1
Строка B2
..."></textarea>
</div>
</div>
<div style="display:flex; gap:8px; align-items:center;">
<button id="example">Заполнить пример</button>
<button id="clear">Очистить 1 и 2</button>
<button id="clearright">Очистить 2</button>
<button id="clearleft">Очистить 1</button>
<button id="compare">Сравнить</button>
<div class="small">Сравнивает без учёта регистра. Для каждой строки из списка 1 выводятся все строки из списка 2 с максимальной длиной общей подстроки.</div>
</div>
<div id="output"></div>
<script>
function longestCommonSubstring(a, b) {
const A = a.toLowerCase();
const B = b.toLowerCase();
const n = A.length, m = B.length;
if (n === 0 || m === 0) return { length: 0 };
const dp = new Array(m + 1).fill(0);
let maxLen = 0, endA = -1, endB = -1;
for (let i = 1; i <= n; i++) {
for (let j = m; j >= 1; j--) {
if (A[i-1] === B[j-1]) {
dp[j] = dp[j-1] + 1;
if (dp[j] > maxLen) {
maxLen = dp[j];
endA = i - 1;
endB = j - 1;
}
} else {
dp[j] = 0;
}
}
}
if (maxLen === 0) return { length: 0 };
const startA = endA - maxLen + 1;
const startB = endB - maxLen + 1;
const substrLower = A.slice(startA, endA + 1);
return { length: maxLen, aStart: startA, bStart: startB, substrLower };
}
function escapeHtml(s) {
return s.replace(/[&<>"']/g, function(ch){
return ({'&':'&','<':'<','>':'>','"':'"',"'":'''})[ch];
});
}
function highlightMatch(original, start, len) {
if (len <= 0) return escapeHtml(original);
const before = escapeHtml(original.slice(0, start));
const match = escapeHtml(original.slice(start, start + len));
const after = escapeHtml(original.slice(start + len));
return before + '<mark>' + match + '</mark>' + after;
}
document.getElementById('compare').addEventListener('click', () => {
const leftRaw = document.getElementById('left').value;
const rightRaw = document.getElementById('right').value;
const leftLines = leftRaw.split(/\r?\n/).filter(l => l.length > 0);
const rightLines = rightRaw.split(/\r?\n/).filter(l => l.length > 0);
const out = document.getElementById('output');
out.innerHTML = '';
if (leftLines.length === 0 || rightLines.length === 0) {
out.innerHTML = '<div class="result-note">Оба списка должны содержать хотя бы одну строку.</div>';
return;
}
// Для каждой строки из leftLines найдем максимальную длину совпадения с любыми строками из rightLines,
// а затем соберём все строки из rightLines, дающие эту длину.
const results = []; // массив объектов { aIndex, aOrig, bestLen, matches: [{bIndex,bOrig,aStart,bStart,len}] }
for (let i = 0; i < leftLines.length; i++) {
let bestLen = 0;
const matches = [];
for (let j = 0; j < rightLines.length; j++) {
const res = longestCommonSubstring(leftLines[i], rightLines[j]);
if (res.length > bestLen) {
bestLen = res.length;
matches.length = 0;
matches.push({ bIndex: j, bOrig: rightLines[j], aStart: res.aStart, bStart: res.bStart, len: res.length });
} else if (res.length === bestLen && res.length > 0) {
matches.push({ bIndex: j, bOrig: rightLines[j], aStart: res.aStart, bStart: res.bStart, len: res.length });
}
}
results.push({ aIndex: i, aOrig: leftLines[i], bestLen: bestLen, matches: matches });
}
// Построим таблицу: каждая строка — строка из списка 1 и колонка с соответствующими строками из списка 2 (может быть несколько).
let html = '<div class="result-note">Результаты (без учёта регистра).</div>';
html += '<table><thead><tr><th>Индекс / Строка из списка 1</th><th>Лучшие совпадения из списка 2 (индекс, длина совпадения и подсветка)</th></tr></thead><tbody>';
for (const r of results) {
const aEscaped = escapeHtml(r.aOrig);
if (r.bestLen === 0) {
html += `<tr><td><strong>[${r.aIndex}]</strong> ${aEscaped}</td><td class="muted">—</td></tr>`;
} else {
// Для каждого соответствия подсветим в обеих строках соответствующую подстроку.
const matchesHtml = r.matches.map(m => {
const aHighlighted = highlightMatch(r.aOrig, m.aStart, m.len);
const bHighlighted = highlightMatch(m.bOrig, m.bStart, m.len);
return `<div><strong>[${m.bIndex}]</strong> (len=${m.len})<div style="margin-top:4px;">${aHighlighted}</div><div style="margin-top:4px;">${bHighlighted}</div></div><hr style="margin:8px 0;">`;
}).join('');
html += `<tr><td><strong>[${r.aIndex}]</strong> ${aEscaped}</td><td>${matchesHtml}</td></tr>`;
}
}
html += '</tbody></table>';
out.innerHTML = html;
});
document.getElementById('example').addEventListener('click', () => {
document.getElementById('left').value = [
"Пример строки с совпадением: маленький котёнок",
"Ещё одна строка: абракадабра",
"Hello, world!",
"Ничего общего"
].join('\n');
document.getElementById('right').value = [
"Большой котёнок и маленький кот",
"abraKAdabra test",
"HELLO there",
"random text"
].join('\n');
});
document.getElementById('clearleft').addEventListener('click', () => {
const left = document.getElementById('left');
left.value = "";
});
document.getElementById('clearright').addEventListener('click', () => {
const right = document.getElementById('right');
right.value = "";
});
document.getElementById('clear').addEventListener('click', () => {
const right = document.getElementById('right');
right.value = "";
const left = document.getElementById('left');
left.value = "";
});
</script>
<pre>
Скрипт (для браузера) для поиска дубликатов в списках строк (например, если вы хоитие сравнить каталоги и найти в них дубликаты файлов. полезно при анализе музыкальных альбомов, для поиска двойников, где изменен только порядок нумерации треков)
=====================
ИНСТРУКЦИЯ
=====================
1. Сохранить следующий код в файле "поиск подстрок в списках (проверка дубликтов).html"
2. Открыть файл в браузере
3. Слева вставить меньший список, справа - больший, нажать кнопку "Сравнить"
4. Появится таблица, где на каждую строку из левого списка будут даны строки с лучшим соответствием (совпадением) из правого.
Чтобы получить список файлов в папке набрать в командной строке Windows
dir /b > список.txt
</pre>
</body>
</html>
