Разделить строку на слова в javascript

Question

В настоящий момент я работаю над текстом, который разбит на плавающие столбцы, чтобы отобразить его в виде magazine-like.

Я спросил previous question как split текст на предложения, и он работает как шарм:

sentences = text.replace(/\.\s+/g,'.|').replace(/\?\s/g,'?|').replace(/\!\s/g,'!|').split("|"); 

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

Пример текста будет:

A wonderful serenity has taken possession of my entire soul. <strong>This is a subheadline</strong><br><br>I am alone, and feel the charm of existence in this spot. 

Мой желаемый результат будет выглядеть следующим образом:

Array [ 
    "A", 
    "wonderful", 
    "serenity", 
    "has", 
    "taken", 
    "possession", 
    "of", 
    "my", 
    "entire", 
    "soul.", 
    "<strong>This is a subheadline</strong>", 
    "<br>", 
    "<br>", 
    "I", 
    "am", 
    "alone,", 
    "and", 
    "feel", 
    "the", 
    "charm", 
    "of", 
    "existence", 
    "in", 
    "this", 
    "spot." 
] 

Когда я разделить на всех непечатаемых я получаю слова, но "<br>" выиграл» t будет добавлена ​​как новая запись массива. Я также не хочу разделить подзаголовок и разметку.

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

пример того, что я пытаюсь достичь вы можете увидеть here

Если вам нужна дополнительная информация, я буду рад дать его вам.

Спасибо заранее,

Tobias

EDIT

Строка может содержать больше HTML-теги в будущем. Есть ли способ не касаться чего-либо между этими тегами?

EDIT 2

Я создал jsfiddle: http://jsfiddle.net/m9r9q/1/

EDIT 3

Будет ли это хорошая идея, чтобы удалить все HTML-тег с инкапсулированным текстом и заменить его заполнители? Затем разделите строку на слова и добавьте нетронутые html-теги при достижении заполнителя? Каким будет регулярное выражение для извлечения всех тэгов html?

Answer 1

Хотя я хочу, чтобы попытаться извлечь HTML часть и добавить их после нетронутого

Забудьте об этом и о моем предыдущем посте. У меня только появилась идея, что гораздо лучше использовать встроенный механизм браузера для работы с html-кодом.

Вы можете просто использовать это:

var text = 'A wonderful serenity has taken possession of my entire soul. <strong>This is a subheadline</strong><br><br>I am alone, and feel the charm of existence in this spot.';  

var elem = document.createElement('div'); 
elem.innerHTML = text; 

var array = []; 

for(var i = 0, childs = elem.childNodes; i < childs.length; i ++) { 
    if (childs[i].nodeType === 3 /* document.TEXT_NODE */) { 
    array = array.concat(childs[i].nodeValue.trim().split(/\s+/)); 
    } else { 
    array.push(childs[i].outerHTML); 
    } 
} 

он поддерживает вложенные тег на этот раз, а также поддерживает все возможные синтаксический без жестко прописанных исключений для не закрывающихся тегов :)

Answer 2

Как я уже говорил в комментарии, вы не должны этого делать. Но если вы настаиваете - вот возможный ответ:

var text = 'A wonderful serenity has taken possession of my entire soul. <strong>This is a subheadline</strong><br><br>I am alone, and feel the charm of existence in this spot.'; 

var array = [], 
    tagOpened = false, 
    stringBuilder = []; 

text.replace(/(<([^\s>]*)[^>]*>|\b[^\s<]*)\s*/g, function(all, word, tag) { 
    if (tag) { 
    var closing = tag[0] == '/'; 
    if (closing) { 
     stringBuilder.push(all); 
     word = stringBuilder.join(''); 
     stringBuilder = []; 
     tagOpened = false; 
    } else { 
     tagOpened = tag.toLowerCase() != 'br'; 
    } 
    } 
    if (tagOpened) { 
    stringBuilder.push(all); 
    } else { 
    array.push(word); 
    } 
    return ''; 
}); 

if (stringBuilder.length) array.push(stringBuilder.join('')); 

Он не поддерживает вложенные теги.Вы можете добавить эту функцию путем реализации стеки для открытых тегов