Malleys,
а может строка 77 const r = Array.from(m); лишняя?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section id="englishWords">
<p id="englishWordsDestination"></p>
<textarea id="englishWordsSource">Вы можете редактировать этот текст, в котором подсвечиваются английские слова. Ответственность за грамотность слов лежит на вас!
The Democrats coöperate to reëlect the President.
Stone now faces up to forty-five years in prison, on charges that he secretly coördinated with WikiLeaks and the Trump campaign on the release of Russian-hacked Democratic e-mails from the 2016 Presidential campaign and then lied to Congress about it.
Why not pretend to live in a world where North Korea is disarming, Iran is the deal-breaker, and a big, beautiful, soon-to-be-built wall is defending us from the southern invaders?
Fleitz, who served as a C.I.A. analyst for nineteen years before briefly becoming the chief of staff on Trump’s N.S.C., last year, was sticking with that line the next day.</textarea>
</section>
<style>
html, body, #englishWords, #englishWords > * {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
box-sizing: border-box;
border: 0;
}
#englishWordsDestination {
position: absolute;
color: transparent;
z-index: -1;
}
#englishWordsDestination mark {
display: inline;
color: inherit;
background: #E3F2FD;
outline: 2px solid #BBDEFB;
word-break: break-word;
}
#englishWords > * {
display: block;
resize: none;
background: transparent;
font: 1.25em / 1.5em Menlo, Consolas, monospace;
padding: 1em;
white-space: pre-wrap;
word-break: break-word;
overflow: auto;
}
</style>
<script>
const ENGLISH_WORD_REGEXP = /([a-z]\.){2,}|\d*[a-zçéäëïöü'’‘–—-]+\d*/i;
englishWordsSource.addEventListener("input", hightlightEnglishWords);
englishWordsSource.addEventListener("scroll", event => {
englishWordsDestination.scrollTop = englishWordsSource.scrollTop;
englishWordsDestination.scrollLeft = englishWordsSource.scrollLeft;
});
hightlightEnglishWords();
function hightlightEnglishWords() {
const text = englishWordsSource.value;
var s = text, m, i = 0, matchAll = [];
matchAll.input = text;
while(m = s.match(ENGLISH_WORD_REGEXP)) {
s = s.slice(m.index + Math.max(1, m[0].length));
m.index += i;
i = m.index + m[0].length;
matchAll.push(m);
if(!s.length) break;
}
englishWordsDestination.textContent = "";
englishWordsDestination.appendChild(
markHighlightedWords(matchAll)
);
}
function markHighlightedWords(m) {
var i = 0;
const fragment = document.createDocumentFragment();
for(const match of m) {
fragment.appendChild(document.createTextNode(m.input.slice(i, match.index)));
const highlighted = document.createElement("mark");
highlighted.textContent = m.input.slice(match.index, i = match.index + match[0].length);
fragment.appendChild(highlighted);
}
return fragment;
}
</script>
</body>
</html>