Некоторые слова пишутся через дефис. (Например, un-ionized (not in ion form), сравните с unionized (organized into trade unions), сейчас некоторые понятия пишут с определением Electronic, например, e-mail, e-learning, e-government, e-commerce и пр.) Такой дефис обязателен.
Также используется апостроф (например, the Eagle’s feathers, fish ‘n’ chips, и пр.)
Аббревиатуры могут писаться через точку. (сравните USA, FBI, RIP c U.S.A., F.B.I., R.I.P.)
Чтобы показать, что гласная буква образует отдельный слог, над ним может ставиться умляут. (например, zoölogy, antiïntellectual, reëlection, и пр., которые обычно пишутся через дефис или слитно, имя Chloë, и пр.)
Чтобы показать, что е не немая, над ней может ставиться акут. (например, née, resumé, café, имя Renée, и пр.)
Чтобы показать, что c читается как s, а не k, под ней может ставиться седиль. (например, façade, и пр.)
Так что,
pautinaweb,
ksa,
laimas, регулярное выражение будет таким...
const ENGLISH_WORD_REGEXP = /([a-z]\.){2,}|\d*[a-zçéäëïöü'’‘–—-]+\d*/i;
Пример подсветки...
<!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)) {
const r = Array.from(m);
r.index = i + m.index;
i += m.index + m[0].length;
matchAll.push(r);
s = s.slice(m.index + Math.max(1, m[0].length));
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>
Текст для примера взят из
The New Yorker