将字符串拆分为javascript中的单词

Question

目前，我正在处理分解为浮动列的文本，以magazine-like方式显示它。

我在上一个问题中问过如何将文本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>"添加为新的数组条目。 我也不想拆分副标题和标记。

我要执行此操作的原因是，我将序列后的序列添加到p标签中，并且当高度大于周围的元素时，我会删除最后添加的序列并创建一个新的浮动p标签。 当我将其拆分为句子时，我发现分手不足以确保良好的阅读流程。

我试图达到的一个例子可以在这里看到

如果您需要任何进一步的信息，我将很高兴为您提供。

提前致谢，

托比亚斯

编辑

该字符串将来可能包含更多的html标签。 有没有办法在这些标签之间不碰任何东西？

编辑2

我创建了一个jsfiddle： http : //jsfiddle.net/m9r9q/1/

编辑3

删除所有带有封装文本的html标签并将其替换为占位符是个好主意吗？ 然后将字符串拆分成单词，并在到达占位符时添加未修饰的html标签？ 提取所有html标签的正则表达式是什么？

Answer 1

正如我之前在评论中所述-您不应该这样做。 但是，如果您坚持-这是一个可能的答案：

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(''));

它不支持嵌套标签。 您可以通过为打开的标签实现堆栈来添加此功能

Answer 2

虽然我想尝试提取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);
  }
}

这次它确实支持嵌套标签，它也支持所有可能的语法，而对于不可关闭的标签则没有硬编码的异常:)