Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.04.2023, 21:00
Новичок на форуме
Отправить личное сообщение для IamAnton Посмотреть профиль Найти все сообщения от IamAnton
 
Регистрация: 25.12.2022
Сообщений: 9

Как выделить иностранные слова в html файле с помощью скрипта
Перевожу иностранную книгу по программированию на Java. Результат оформляю в файл html, чтобы можно было добавить туда картинки, код, выделить код в отдельные фрагменты и т. д. Идея не новая. В тексте много иностранных терминов. Я их хочу выделить, скажем, тегами <b> или <span> со стилем. Но выделять вручную неудобно да и утомительно. Можно ли написать скрипт, выделяющий иностранные слова определенным тегом?
Ответить с цитированием
  #2 (permalink)  
Старый 21.04.2023, 22:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

выделение слов в тексте
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>
Ответить с цитированием
  #3 (permalink)  
Старый 22.04.2023, 09:23
Новичок на форуме
Отправить личное сообщение для IamAnton Посмотреть профиль Найти все сообщения от IamAnton
 
Регистрация: 25.12.2022
Сообщений: 9

рони,
Благодарю! Хотя я лично многое из этого не понял.
Ответить с цитированием
  #4 (permalink)  
Старый 22.04.2023, 09:30
Новичок на форуме
Отправить личное сообщение для IamAnton Посмотреть профиль Найти все сообщения от IamAnton
 
Регистрация: 25.12.2022
Сообщений: 9

рони,
И правда работает. Благодарю, добрый человек. Хотя некоторые вещи мне в этом коде незнакомы.
Ответить с цитированием
  #5 (permalink)  
Старый 22.04.2023, 15:12
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,520

Хреновый код. Он берёт тест, а вставляет html. Если там будет < или > - всё сломается.
__________________
29375, 35
Ответить с цитированием
  #6 (permalink)  
Старый 22.04.2023, 15:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Сообщение от Aetae
Если там будет < или > - всё сломается.
можно пример?
Ответить с цитированием
  #7 (permalink)  
Старый 27.04.2023, 10:25
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,520

<!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>
__________________
29375, 35
Ответить с цитированием
  #8 (permalink)  
Старый 27.04.2023, 11:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Aetae,
спасибо за науку.
Ответить с цитированием
  #9 (permalink)  
Старый 27.04.2023, 13:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

как-то так ...
<!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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как в цыкле вывести массив в html и сделать selected его нулевой eлемент с помощью js jobananada Общие вопросы Javascript 9 11.06.2019 14:29
Как с помощью PHP сохранить какие-либо изменения в HTML документе? FirstFrost Работа 6 06.09.2010 16:16
Как с помощью PHP сохранить какие-либо изменения в HTML документе? FirstFrost Общие вопросы Javascript 1 15.07.2010 17:12
Как с помощью JavaScript сохранить какие-либо изменения в HTML документе? FirstFrost Общие вопросы Javascript 1 15.07.2010 16:23
Как с помощью JS "на-лету" менять часть HTML кода greendoc Общие вопросы Javascript 2 18.03.2008 20:43