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

$.fn.hyphenate

by Alexander Zonov

HTML

<h1>Расстановка переносов в html тексте на русском языке</h1>
<p align="right">Источник <a href="http://vyachet.ru/hyphen-russian-html-text/"> http://vyachet.ru/hyphen-russian-html-text/</a></p>
<div class="control">
    <button class="apply css" title="">Вкл/Выкл CSS</button>
    <button class="apply js">Вкл/Выкл JS</button>
</div>

<div class="entry-content">
 <p>Существует серия правил css для разных браузеров hyphens,&nbsp;-moz-hyphens,&nbsp;-webkit-hyphens,&nbsp;-ms-hyphens. (<a href="http://htmlbook.ru/blog/perenosy-slov">О переносах слов на htmlbook.ru</a>)</p>
<p>К сожалению эти правила не работают в chrome, поэтому пришлось искать выход.<br>
Я не сторонник нагрузок на сервер, которых можно избежать, поэтому начал искать нет ли уже готового решения на javascript — пусть работу, которую можно переложить на браузер — делает браузер. Плюс к тому, на стороне сервера пришлось бы изменять текст, который попадет в браузер, что может плохо сказаться на индексации поисковиками. <span id="more-162"></span></p>
<p>Есть отличный скрипт для расстановки переносов в русском тексте, очень маленький и лаконичный, прямо произведение искусства. Вот он в виде jquery плагина.</p>
</div>
<label>Свой текст:<textarea id="customtext"></textarea></label>
<div class="control">
    <button class="apply text custom" title="">Применить свой</button>
    <button class="apply text reset">Сбросить</button>
</div>

SCSS

h1 {
	font-size: 1.1em;
}

.entry-content {
	border: 1px solid;
	padding: 10px;
	width: 50%;
	height: 300px;
	overflow: auto;
	margin: 0 auto;
	position: relative;
	&.js, &.hyphens {
		&:before {
			background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0;
			box-shadow: 0 0 3px;
			color: green;
			content: " JS ";
			display: block;
			font-size: 10px;
			font-weight: bold;
			left: 0;
			opacity: 0.8;
			padding: 0 0.5em;
			position: absolute;
			top: 0;
		}
	}
	&.hyphens {
		&:before {
			content: " CSS "
		}
		&.js:before {
			content: " CSS, JS "
		}
	}

}

.hyphens {
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
}

.control {
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin: 1em;
	a {
		padding: 0.3em 0.5em
	}
}

textarea {
	display: block;
	width: 60%;
	margin: 0 auto;
}

JavaScript

$.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);
  });
};

// demo calls
$(".apply").click(function(e){
 e.preventDefault();
 var $s = $(this), $c = $(".entry-content"),$t = $("#customtext");
 if (!$c.data("original")) $c.data("original",$c.html());
 $s.is(".js") && ( 
     !$c.is(".js") && ($c.addClass("js") && $c.hyphenate()) || 
      ($c.removeClass("js") && $c.html($c.data("original")))
     );
 $s.is(".css") && $c.toggleClass("hyphens") 
      && $("html").attr("lang","ru");
 if ($s.is(".text")) {
  $s.is(".custom") && 
   $c.data("reset",$c.data("original")).data("original",$t.val());   
  $s.is(".reset") && $c.data("original",$c.data("reset"));
   $c.removeClass("js").html($c.data("original"));
 }
 console.log($c.data());

})