Как перенести строку, если строка заканчивается на предлог или союз?

Question

[Ves Mir]

Массив значений + фильтр на уникальные готов.

let unionsAndPrepositions = ['так что', 'дабы', 'с тем чтобы','несмотря на то', 'хоть', 'пускай', 'хотя', 'если', 'если бы', 'коли', 'ежели', 'так как', 'потому что',
   'как будто', 'словно', 'точно', 'как', 'как бы', 'до такой степени', 'настолько', 'до того', 'такой', 'где', 'куда', 'откуда', 'когда', 'что', 'то есть',
    'а именно', 'и', 'да', 'не только', 'но и', 'также', 'тоже', 'и', 'ни', 'как', 'так', 'сколько', 'столько', 'или', 'либо', 'то', 'ли', 'не', 'то', 'а', 
    'зато', 'однако', 'же', 'все же', 'чтобы', 'чтоб', 'притом', 'причём', 'в', 'без', 'до', 'из', 'к', 'на', 'по', 'о', 'от', 'перед', 'при', 'через', 'с', 'у', 
    'и', 'нет', 'за', 'над', 'для', 'об', 'под', 'про'];

function uniqueArr(arr) {
    let uniqueUnions = [];
  
    for (let str of arr) {
      if (!unionsAndPrepositions.includes(str)) {
        unionsAndPrepositions.push(str);
      }
    }
  
    return unionsAndPrepositions;
  }

Как сделать поиск по всем DOM-елементам, чтобы строки переносились, если последнее слово строки одно из массива, возвращаемого функцией?

Comments

[Роман]

сложность будет не с поиском а с такими вложениями:

<p>sdjkf vcmsbvk dvjk s vsv <b>dngdv sjk</b> ednfkj v v  vefnsefn</p>

Если хотите конкретный ответ, приведите конкретный пример текста и допустимых ограничений по тексту. Например:
- В блоках текста, обрабатываемых как единый, не допускается (или наоборот допускается) присутствие элементов декорирующих текст, таких как <b>, <i> и т.п.;
- Блоки текста обрабатываемые как единый, не имеют (или наоборот имеют) разрывы (могут быть разбросаны по блокам типа <div> но при этом должны обрабатываться как сплошной блок текста;
- Наличие или отсутствие других важных для обработки ограничений.

Эти условия могут как существенно упростить ответ, так и его неимоверно усложнить.

[Ves Mir]

Пример текста с переносами по текущему блоку:

"Женя вспомнил, что давно не звонил бабушке и не узнавал, как у нее дела. Но денег на
телефоне совсем не осталось. Можно зайти в салон связи и добавить 50 рублей через
терминал.
Позвонить бабушке или отложить разговор?"

Блоки текстов могут содержать вложенные теги <b>,<i> и т.п.
Блок может увеличиваться и уменьшаться, но не должен заканчиваться на слова из массива.

[hzzzzl]

Роман, да не, почему, innerHTML/innerText у блока будет одинаковый несмотря на вложенные блоки

если бы не условие про ширину блока, то можно бы было примерно так

s = '<p>sdjkf vcmsbvk dvjk s vsv <b>dngdv sjk</b> ednfkj v v  vefnsefn</p>'
s.replace(/sjk|vsv/g, (match) => `${match}\n`)

[Роман]

hzzzzl, а если так попадется

<p>текст текст текст так <b>что</b> текст текст</p>

Меняя через textContent/innerText разве не будет убита декорация?

[hzzzzl]

Роман, это я задумался о вечности и перепутал, поменял на innerHTML

вот можно на этой странице в консоли попробовать

e = document.querySelector('#clarification_792589')
e.style.background = '#ccffda'
e.innerHTML = e.innerHTML.replace(/через/g, (match) => `${match}\n<br>`)
// просто \n не сработает из-за css на тостере

Answer 1

[hzzzzl]

"последнее слово строки" в элементе это в смысле как на экране отображается страница, в зависимости от респонсивности/разрешения браузера/итд? а то иначе это же просто будет последнее слово в элементе, что там куда переносить

Comments

[Ves Mir]

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

Какое слово будет последним неизвестно, так как адаптивность (меняется размер блоков)

[hzzzzl]

Ves Mir, не, боюсь что такое не выйдет, наверняка нельзя браузерным яваскриптом вычислить, какое именно последнее слово сейчас..

только если получить абсолютную ширину блока в пикселях и среднюю ширину буквы (шрифт не моноширинный), и поделить, и найти ближайший индекс символа к одному из этих стоп-слов.... но это фиг знает уже муторно как-то :)

[Роман]

hzzzzl, на самом деле все просто, ничего не надо вычислять, просто после каждого из искомых слов (комбинаций) надо вставить неразрывный пробел (в случае комбинаций также вставить неразрывный пробел в самих комбинациях)

Answer 2

[y0u]

TL;DR
Нужно найти все необходимые слова в строке + следующее за ним слово и обернуть каждое найденное слово в span, у которого будет свойство white-space: nowrap;.

Предположим, что в строке

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste nihil,
quod sed nesciunt corporis sit. Totam ex veniam, modi pariatur vitae deleniti.
Optio quibusdam recusandae illum culpa ea cumque pariatur?

нужно, чтобы слово Totam ex переносилось на новую строку, если оно стоит последним в строке.

Мы знаем, что если следующее слово, которое идет за нужным (в примере это veniam), окажется в конце строки, то как только ширина контейнера уменьшиться на такое значение, при котором это слово перенесется на новую строку — последним словом, оставшимся в первой строке будет наше нужное слово.

По скольку по условию мы не хотим, чтобы последним словом в строке было слово Totam ex мы должны перенести его в тот момент. когда переносится слово veniam. Для этого мы можем обернуть наше слово + следующее за ним в какой-то тег и добавить этому тегу свойство white-space: nowrap; Данное свойство не позволит перенести слово veniam отдельно от Totam ex, а это как раз то, что нам нужно.

Простой пример:

Answer 3

[Ves Mir]

Таким образом будет будут переносы каждый раз, когда вотчер наткнется на один из элементов массива, но не в конце каждой строки.