Как выделить иностранные слова в html файле с помощью скрипта
Перевожу иностранную книгу по программированию на Java. Результат оформляю в файл html, чтобы можно было добавить туда картинки, код, выделить код в отдельные фрагменты и т. д. Идея не новая. В тексте много иностранных терминов. Я их хочу выделить, скажем, тегами <b> или <span> со стилем. Но выделять вручную неудобно да и утомительно. Можно ли написать скрипт, выделяющий иностранные слова определенным тегом?
|
выделение слов в тексте
IamAnton,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.br {
text-decoration: underline;
color: #0000FF;
}
</style>
</head>
<body>
<div class="content">
Как выделить иностранные слова в html файле с помощью скрипта Перевожу иностранную книгу по программированию на Java. Результат оформляю в файл html, чтобы можно было добавить туда картинки, код, выделить код в отдельные фрагменты и т. д. Идея не новая.
В тексте много иностранных терминов. Я их хочу выделить, скажем, тегами <b> или <span> со стилем. Но выделять вручную неудобно да и утомительно. Можно ли написать скрипт, выделяющий иностранные слова определенным тегом?
</div>
<script>
window.addEventListener('load', function() {
const replacing = elem => {
for (let node, textNodes = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false); node = textNodes.nextNode();) {
let html = node.nodeValue.replace(/([a-z]+)/gi, '<span class="br">$1</span>');
let div = document.createElement('div');
div.innerHTML = html;
node.replaceWith(...div.childNodes)
}
}
let elem = document.querySelector(".content");
replacing(elem);
})
</script>
</body>
</html>
|
рони,
Благодарю! Хотя я лично многое из этого не понял. |
рони,
И правда работает. Благодарю, добрый человек. Хотя некоторые вещи мне в этом коде незнакомы.:( |
Хреновый код. Он берёт тест, а вставляет html. Если там будет < или > - всё сломается.
|
Цитата:
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.br {
text-decoration: underline;
color: #0000FF;
}
</style>
</head>
<body>
<div class="content">
Комметарии в html коде выглядят так: <!-- comment -->.
</div>
<script>
window.addEventListener('load', function() {
const replacing = elem => {
for (let node, textNodes = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false); node = textNodes.nextNode();) {
let html = node.nodeValue.replace(/([a-z]+)/gi, '<span class="br">$1</span>');
let div = document.createElement('div');
div.innerHTML = html;
node.replaceWith(...div.childNodes)
}
}
let elem = document.querySelector(".content");
replacing(elem);
})
</script>
</body>
|
Aetae,
спасибо за науку. :thanks: |
:) как-то так ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.br {
text-decoration: underline;
color: #0000FF;
}
</style>
</head>
<body>
<div class="content">
Комметарии в html коде выглядят так: <!-- comment -->.
</div>
<script>
window.addEventListener('load', function() {
const replacing = elem => {
let span = document.createElement('span');
span.className = 'br';
let range = new Range();
let textNodes = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
const nodeList = [];
let txtNode = textNodes.nextNode();
while (txtNode) {
nodeList.push(txtNode);
txtNode = textNodes.nextNode();
}
for (let node of nodeList) {
let reg = /([a-z]+)/gi;
let search;
while ((search = reg.exec(node.nodeValue)) != null) {
let txt = search[0],
start = search.index,
end = start + txt.length;
let clone = span.cloneNode(true);
range.setStart(node, start);
range.setEnd(node, end);
range.surroundContents(clone);
reg.lastIndex = 0;
node = clone.nextSibling;
};
}
}
let elem = document.querySelector(".content");
replacing(elem);
})
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 22:37. |