Расстановка переносов в html тексте на русском языке

Расстановка переносов в html тексте на русском языке бывает крайне затруднительна, но я нашел универсальное решение.

Существует серия правил css для разных браузеров hyphens, -moz-hyphens, -webkit-hyphens, -ms-hyphens

К сожалению эти правила не работают в chrome, поэтому пришлось искать выход.
Я не сторонник нагрузок на сервер, которых можно избежать, поэтому начал искать нет ли уже готового решения на javascript — пусть работу, которую можно переложить на браузер — делает браузер. Плюс к тому, на стороне сервера пришлось бы изменять текст, который попадет в браузер, что может плохо сказаться на индексации поисковиками.

Расстановка переносов в html тексте на русском языке

Расстановка переносов в html тексте на русском языке

Есть отличный скрипт для расстановки переносов в русском тексте, очень маленький и лаконичный, прямо произведение искусства. Вот он в виде jquery плагина

$.fn.hyphenate = function() {
  var all = "[абвгдеёжзийклмнопрстуфхцчшщъыьэюя]",
    glas = "[аеёиоуыэю\я]",
    sogl = "[бвгджзклмнпрстфхцчшщ]",
    zn = "[йъь]",
    shy = "\xAD",
    re = [];
  
  re[1] = new RegExp("("+zn+")("+all+all+")","ig");
  re[2] = new RegExp("("+glas+")("+glas+all+")","ig");
  re[3] = new RegExp("("+glas+sogl+")("+sogl+glas+")","ig");
  re[4] = new RegExp("("+sogl+glas+")("+sogl+glas+")","ig");
  re[5] = new RegExp("("+glas+sogl+")("+sogl+sogl+glas+")","ig");
  re[6] = new RegExp("("+glas+sogl+sogl+")("+sogl+sogl+glas+")","ig");
  return this.each(function() {
    var text = $(this).html();
    for (var i = 1; i < 7; ++i) {
      text = text.replace(re[i], "$1"+shy+"$2");
    }
    $(this).html(text);
  });
};

Вызывается, как и любой jquery плагин:

$(function() {
    $('.article-text').hyphenate();
})

Демонстрация работы плагина тут http://jsfiddle.net/swed/94crypw7/

01.06.2021 / Создание сайта и блога
Похожие записи

Добавить комментарий