Получите слово, разбитое на слоги и разделенное дефисами, не отображая его как

Question

Я хотел бы получить строку, состоящую из слова, разбитого на один или несколько слогов, и, если их несколько, с дефисами, между ними тоже.

Например: я хотел бы вывести Floccinaucinihilipil-ification из Floccinaucinihilipilification.

Современные браузеры могут разбивать их уже дефисами, грамматически правильно.

Причина: я хотел бы показать термин, как это было бы показано в словаре. Для этого проще всего было бы получить доступ к тому, как браузер сломал бы его, но показать это одной строкой.

Другими словами: есть ли способ получить доступ к слову, как это было бы показано агенту пользователя, если бы было достаточно места, чтобы показать хотя бы самые узкие слоги?

Answer 1

Можно, если немного утомительно, определить, где в документе находятся переносы слов. Но вы также зависите от того, есть ли в браузере словарь переносов, который может зависеть от платформы и, возможно, от языка пользователя.

Вот один из подходов, который работает в Firefox. Я не мог заставить Chrome или WebKit надежно переносить слово в каждом возможном месте, и он просто отказывался от переноса ниже определенной ширины.

testbed.innerHTML = testbed.innerHTML.replace(/./g, '<span>$&</span>');
outer = testbed.getBoundingClientRect();
match = [...testbed.querySelectorAll('span:not(:first-child)')].filter(e => e.getBoundingClientRect().x == outer.x);
match.forEach(e => e.classList.toggle('match', true));
output = [...testbed.children].map(e => (e.classList.contains('match') ? '-' : '') + e.textContent).join('');
console.log(output);

div#testbed {
  width: 0;
  hyphens: auto;
}
span.match {
  background: magenta;
}

<div id=testbed lang=en>Floccinaucinihilipilification</div>

Answer 2

Если вы хотите автоматический перенос слов, вам придется использовать стороннюю js Библиотека, как Hyphenator.

Если вы хотите разместить отметки, такие как ­вручную, вы можете сделать это в html рукой.