Форум

IamAnton · #1 (**permalink**) 21.04.2023, 21:00

Перевожу иностранную книгу по программированию на Java. Результат оформляю в файл html, чтобы можно было добавить туда картинки, код, выделить код в отдельные фрагменты и т. д. Идея не новая. В тексте много иностранных терминов. Я их хочу выделить, скажем, тегами <b> или <span> со стилем. Но выделять вручную неудобно да и утомительно. Можно ли написать скрипт, выделяющий иностранные слова определенным тегом?

рони · #2 (**permalink**) 21.04.2023, 22:13

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, чтобы можно было добавить туда картинки, код, выделить код в отдельные фрагменты и т. д. Идея не новая.
        В тексте много иностранных терминов. Я их хочу выделить, скажем, тегами &lt;b> или &lt;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>

IamAnton · #3 (**permalink**) 22.04.2023, 09:23

рони,
Благодарю! Хотя я лично многое из этого не понял.

IamAnton · #4 (**permalink**) 22.04.2023, 09:30

рони,
И правда работает. Благодарю, добрый человек. Хотя некоторые вещи мне в этом коде незнакомы.

Aetae · #5 (**permalink**) 22.04.2023, 15:12

Хреновый код. Он берёт тест, а вставляет html. Если там будет < или > - всё сломается.

рони · #6 (**permalink**) 22.04.2023, 15:32

Сообщение от Aetae

Если там будет < или > - всё сломается.

можно пример?

Aetae · #7 (**permalink**) 27.04.2023, 10:25

<!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 коде выглядят так: &lt;!-- comment --&gt;.
    </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>

рони · #8 (**permalink**) 27.04.2023, 11:49

Aetae,
спасибо за науку.

рони · #9 (**permalink**) 27.04.2023, 13:57

как-то так ...

<!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 коде выглядят так: &lt;!-- comment --&gt;.
    </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>

Форум

Справочник

Discord чат

Курсы javascript