fix: 原地替换文本节点,保持 HTML 结构不变

This commit is contained in:
小橘 2026-04-16 04:34:47 +00:00
parent 5e4b811ff4
commit ace23ceadc
2 changed files with 30 additions and 36 deletions

View File

@ -1,26 +1,26 @@
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('blockquote[data-cn]').forEach(function (el) { document.querySelectorAll('blockquote[data-cn]').forEach(function (el) {
const orig = el.getAttribute('data-orig'); const cn = el.getAttribute('data-cn').split('|');
const cn = el.getAttribute('data-cn'); // 收集所有文本节点
const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
const nodes = [];
while (walker.nextNode()) nodes.push(walker.currentNode);
// 存原文
const orig = nodes.map(n => n.textContent);
let showing = 'orig'; let showing = 'orig';
function swap(to) { function swap(to) {
const text = to === 'cn' ? cn : orig; if (to === 'cn') {
// 清空并重建文本内容,保留换行 cn.forEach((text, i) => { if (nodes[i]) nodes[i].textContent = text; });
el.innerHTML = text.split('
').join('\n') } else {
.split('\n').map((line, i, arr) => { orig.forEach((text, i) => { if (nodes[i]) nodes[i].textContent = text; });
if (i === arr.length - 1 && line === '') return ''; }
return line;
}).join('<br>');
showing = to; showing = to;
} }
el.style.cursor = 'pointer'; el.style.cursor = 'pointer';
el.addEventListener('mouseenter', () => swap('cn')); el.addEventListener('mouseenter', () => swap('cn'));
el.addEventListener('mouseleave', () => swap('orig')); el.addEventListener('mouseleave', () => swap('orig'));
el.addEventListener('click', (e) => { el.addEventListener('click', () => swap(showing === 'orig' ? 'cn' : 'orig'));
e.preventDefault();
swap(showing === 'orig' ? 'cn' : 'orig');
});
}); });
}); });

View File

@ -13,50 +13,44 @@ echo "of the human, by the human, for the human" | sed 's/human/AI/g'
--- ---
<blockquote data-orig="Umwertung aller Werte.&#10;&#10;— Nietzsche" data-cn="重估一切价值。&#10;&#10;— 尼采"> <blockquote data-cn="重估一切价值。|— 尼采">
Umwertung aller Werte. <p>Umwertung aller Werte.</p>
<p>— Nietzsche</p>
— Nietzsche
</blockquote> </blockquote>
--- ---
<blockquote data-orig="Die Proletarier haben nichts in ihr zu verlieren als ihre Ketten. Sie haben eine Welt zu gewinnen.&#10;&#10;— Marx" data-cn="无产者在这个革命中失去的只是锁链,他们获得的将是整个世界。&#10;&#10;— 马克思"> <blockquote data-cn="无产者在这个革命中失去的只是锁链,他们获得的将是整个世界。|— 马克思">
Die Proletarier haben nichts in ihr zu verlieren als ihre Ketten. Sie haben eine Welt zu gewinnen. <p>Die Proletarier haben nichts in ihr zu verlieren als ihre Ketten. Sie haben eine Welt zu gewinnen.</p>
<p>— Marx</p>
— Marx
</blockquote> </blockquote>
--- ---
<blockquote> <blockquote>
枪杆子里面出政权。 <p>枪杆子里面出政权。</p>
<p>— 毛泽东</p>
— 毛泽东
</blockquote> </blockquote>
--- ---
<blockquote data-orig="I have a dream, today.&#10;&#10;— Martin Luther King Jr." data-cn="我有一个梦想,就是今天。&#10;&#10;— 马丁·路德·金"> <blockquote data-cn="我有一个梦想,就是今天。|— 马丁·路德·金">
I have a dream, today. <p>I have a dream, today.</p>
<p>— Martin Luther King Jr.</p>
— Martin Luther King Jr.
</blockquote> </blockquote>
--- ---
<blockquote data-orig="of the people, by the people, for the people.&#10;&#10;— Lincoln" data-cn="民有、民治、民享。&#10;&#10;— 林肯"> <blockquote data-cn="民有、民治、民享。|— 林肯">
of the people, by the people, for the people. <p>of the people, by the people, for the people.</p>
<p>— Lincoln</p>
— Lincoln
</blockquote> </blockquote>
--- ---
<blockquote data-orig="Hasta la victoria siempre.&#10;&#10;— Che Guevara" data-cn="直到永远的胜利。&#10;&#10;— 切·格瓦拉"> <blockquote data-cn="直到永远的胜利。|— 切·格瓦拉">
Hasta la victoria siempre. <p>Hasta la victoria siempre.</p>
<p>— Che Guevara</p>
— Che Guevara
</blockquote> </blockquote>
--- ---