Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Плагин для переноса слов по слогам (https://javascript.ru/forum/dom-window/86560-plagin-dlya-perenosa-slov-po-slogam.html)

sashgera 03.08.2025 14:24
Плагин для переноса слов по слогам
 
Здравствуйте
Нашел на github плагин для переноса слов по слогам
Немного изменил плагин, что бы перенос слов был и в латинице
RusLatA - добавил буквы английского алфавита
RusLatV - добавил гласные буквы английского алфавита
RusLatN - добавил согласные буквы английского алфавита

Но теперь появилась такая проблема - в тексте есть див '#line_break', который используется в качестве разделителя и стили этого дива игнорируются
если убрать из RusLatV буквы английского алфавита (aeiou), тогда все норм, стили дива выполняются
Код:
<style type="text/css">
#test{
        width:110px;
        height:300px;
        background:#CF9;
        text-align:justify;
}
#line_break{
        width:100%;
        height:1px;
        font-size:1px;
        margin-top:3px;
        border-top:1px dotted currentColor;
}
</style>

<button onclick="transfer();">перенос текста</button>

<div id="test">
    проверка переноса слов латиницы и Cyrillic по слогам
    <div id='line_break'></div>
    test переноса слов после разделителя
</div>

<script type="text/javascript">
$.fn.hyphenate = function(){
        var RusLatA = "[abcdefghijklmnopqrstuvwxyzабвгдеёжзийклмнопрстуфхцчшщъыьэюя]";
        var RusLatV = "[aeiouаеёиоуыэю\я]";
        var RusLatN = "[bcdfghjklmnpqrstvwxyzбвгджзклмнпрстфхцчшщ]";
        var RusLatX = "[йъь]";
        var Hyphen = "\xAD";
        var re1 = new RegExp("("+RusLatX+")("+RusLatA+RusLatA+")","ig");
        var re2 = new RegExp("("+RusLatV+")("+RusLatV+RusLatA+")","ig");
        var re3 = new RegExp("("+RusLatV+RusLatN+")("+RusLatN+RusLatV+")","ig");
        var re4 = new RegExp("("+RusLatN+RusLatV+")("+RusLatN+RusLatV+")","ig");
        var re5 = new RegExp("("+RusLatV+RusLatN+")("+RusLatN+RusLatN+RusLatV+")","ig");
        var re6 = new RegExp("("+RusLatV+RusLatN+RusLatN+")("+RusLatN+RusLatN+RusLatV+")","ig");
        this.each(function(){
                var text=$(this).html();
                text = text.replace(re1, "$1"+Hyphen+"$2");
                text = text.replace(re2, "$1"+Hyphen+"$2");
                text = text.replace(re3, "$1"+Hyphen+"$2");
                text = text.replace(re4, "$1"+Hyphen+"$2");
                text = text.replace(re5, "$1"+Hyphen+"$2");
                text = text.replace(re6, "$1"+Hyphen+"$2");
                $(this).html(text);
        });
};

function transfer(){
        $("#test").hyphenate();
}
</script>

Nexus 03.08.2025 14:38
Вы для своей магии используете не текстовое содержимое блока, а его html-разметку. Из-за этого, возможно, верстка блока нарушается и ваш блок #line_break дематериализуется.

Код - мое почтение. Без бутылки-другой даже пытаться разобраться - страшно.

sashgera 03.08.2025 16:09
Цитата:
Сообщение от Nexus
блок #line_break дематериализуется
Nexus, блок #line_break не удаляется, удаляются стили этого дива
и как я уже писал выше, если из RusLatV убрать буквы английского алфавита (aeiou), тогда стили не удаляются

sashgera 03.08.2025 16:47
изменил название дива #line_break на #lb
исключив в названии гласные буквы, костыль конечно, но так все работает - стили дива не удаляются

рони 04.08.2025 12:17
sashgera,
Цитата:
Сообщение от Nexus
Вы для своей магии используете не текстовое содержимое блока, а его html-разметку.
пример обработки только текста и просто по теме переноса ...
пост #32 строки 70 - 75
https://javascript.ru/forum/misc/843...-slogam-4.html

sashgera 11.08.2025 17:17
Цитата:
Сообщение от рони (Сообщение 557703)
sashgera,
пример обработки только текста и просто по теме переноса ...
пост #32 строки 70 - 75
https://javascript.ru/forum/misc/843...-slogam-4.html
рони, спасибо, но я, к сожалению, не смог разобраться

плагин добавляет в слова символы мягкого дефиса (shy), в том числе и дочерних html-элементах
получается типа: <div id="li-ne_bre-ak"></div>
или: <but-ton></but-ton>
сделал так:
Код:
<style type="text/css">
#test{
        width:110px;
        height:300px;
        background:#CF9;
        text-align:justify;
}
#line_break{
        width:100%;
        height:1px;
        font-size:1px;
        margin-top:3px;
        border-top:1px dotted currentColor;
}
.cyrillic{
        width:100%;
        height:20px;
        margin-top:5px;
        background-color:#06F;
}
</style>

<button onclick="transfer();">перенос текста</button>
<div id="test">
    проверка переноса слов латиницы и Cyrillic по слогам
    <div id="line_break"></div>
    проверка переноса слов
    <div class="cyrillic"></div>
    <div style="width:100%;height:20px;margin-top:5px;background-color:#0F0;"></div>
</div>

<script type="text/javascript">
$.fn.hyphenate = function(){
        var RusLatA = "[abcdefghijklmnopqrstuvwxyzабвгдеёжзийклмнопрстуфхцчшщъыьэюя]";
        var RusLatV = "[aeiouаеёиоуыэю\я]";
        var RusLatN = "[bcdfghjklmnpqrstvwxyzбвгджзклмнпрстфхцчшщ]";
        var RusLatX = "[йъь]";
        var Hyphen = "\xAD";
        var re1 = new RegExp("("+RusLatX+")("+RusLatA+RusLatA+")","ig");
        var re2 = new RegExp("("+RusLatV+")("+RusLatV+RusLatA+")","ig");
        var re3 = new RegExp("("+RusLatV+RusLatN+")("+RusLatN+RusLatV+")","ig");
        var re4 = new RegExp("("+RusLatN+RusLatV+")("+RusLatN+RusLatV+")","ig");
        var re5 = new RegExp("("+RusLatV+RusLatN+")("+RusLatN+RusLatN+RusLatV+")","ig");
        var re6 = new RegExp("("+RusLatV+RusLatN+RusLatN+")("+RusLatN+RusLatN+RusLatV+")","ig");
       
        this.each(function(){
                var text=$(this).html();
                text = text.replace(re1, "$1"+Hyphen+"$2");
                text = text.replace(re2, "$1"+Hyphen+"$2");
                text = text.replace(re3, "$1"+Hyphen+"$2");
                text = text.replace(re4, "$1"+Hyphen+"$2");
                text = text.replace(re5, "$1"+Hyphen+"$2");
                text = text.replace(re6, "$1"+Hyphen+"$2");
                $(this).html(text);
        });
        //удалить символы мягкого дефиса (shy) в дочерних html-элементах
        this.children().each(function(){
                current_id = $(this).attr("id");
                full_html = $(this).prop("outerHTML").replace(/(\&shy;|­|­)/gi, "");
                $("#"+current_id).replaceWith(full_html);
        });
};

function transfer(){
        $("#test").hyphenate();
}
</script>
теперь символы shy в дочерних html-элементах удалены, но только в элементах с id
мне нужно удаление этих символов во всех html-элементах, включая элементы без идентификатора
поэтому попытался сделать удаление символов в элементах с классом, но моя попытка не работает, проблема в replaceWith.
Не посмотрите?
//удалить символы мягкого дефиса (shy) в дочерних html-элементах с классом 'shy'
this.children().each(function(){
	$(this).addClass("shy");
	current_class = $(".shy").attr("class");
	full_html = $(this).prop("outerHTML").replace(/(\&shy;|­|­)/gi, "");
	$("."+current_class).replaceWith(full_html);
});

Aetae 11.08.2025 19:40 
hyphens: auto;

sashgera 11.08.2025 21:21
Цитата:
Сообщение от Aetae (Сообщение 557744) 
hyphens: auto;
Aetae, спасибо, но css мне не нужен

akiraki22lvl 12.09.2025 12:42
Похоже, что проблема возникает из-за того, что ваш регулярный плагин для переноса слов обрабатывает весь HTML внутри #test как текст, и при этом <div id='line_break'></div> тоже попадает под обработку. Когда вы добавляете английские гласные в RusLatV, регулярка пытается найти совпадения даже внутри пустого div, и браузер теряет стили, потому что HTML-разметка переписывается .html() методом.

Самый простой способ это исправить — исключить дочерние элементы из обработки, чтобы перенос применялся только к текстовым узлам. Например, так:

$.fn.hyphenate = function(){
    var RusLatA = "[abcdefghijklmnopqrstuvwxyzабвгдеёжзийклмнопрстуфхцчшщъыьэюя]";
    var RusLatV = "[aeiouаеёиоуыэюя]";
    var RusLatN = "[bcdfghjklmnpqrstvwxyzбвгджзклмнпрстфхцчшщ]";
    var RusLatX = "[йъь]";
    var Hyphen = "\xAD";
    var re1 = new RegExp("("+RusLatX+")("+RusLatA+RusLatA+")","ig");
    var re2 = new RegExp("("+RusLatV+")("+RusLatV+RusLatA+")","ig");
    var re3 = new RegExp("("+RusLatV+RusLatN+")("+RusLatN+RusLatV+")","ig");
    var re4 = new RegExp("("+RusLatN+RusLatV+")("+RusLatN+RusLatV+")","ig");
    var re5 = new RegExp("("+RusLatV+RusLatN+")("+RusLatN+RusLatN+RusLatV+")","ig");
    var re6 = new RegExp("("+RusLatV+RusLatN+RusLatN+")("+RusLatN+RusLatN+RusLatV+")","ig");

    this.each(function(){
        $(this).contents().each(function(){
            if(this.nodeType === 3){ // только текстовые узлы
                var text = this.nodeValue;
                text = text.replace(re1, "$1"+Hyphen+"$2");
                text = text.replace(re2, "$1"+Hyphen+"$2");
                text = text.replace(re3, "$1"+Hyphen+"$2");
                text = text.replace(re4, "$1"+Hyphen+"$2");
                text = text.replace(re5, "$1"+Hyphen+"$2");
                text = text.replace(re6, "$1"+Hyphen+"$2");
                this.nodeValue = text;
            }
        });
    });
};


Изменения:

Используется $(this).contents() вместо $(this).html().

Проверяем nodeType === 3, чтобы обработка шла только по текстовым узлам, а <div id='line_break'> оставался нетронутым.

Таким образом, стили #line_break будут сохраняться, а перенос слов будет работать и для латиницы.


Часовой пояс GMT +3, время: 18:06.