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>"将不会被添加为新的数组条目。我也不想分割副标题和标记。

我想要这样做的原因是我将序列后序列添加到p-tag中，当高度大于周围元素时，我删除最后添加的序列并创建一个新的浮动p-tag。当我把它分成句子时，我看到，分手不足以确保良好的阅读流程。

我尝试实现的一个例子，你可以看到here

如果您需要任何进一步的信息，我很乐意将其提供给您。

提前致谢，

托拜厄斯

编辑

该字符串将来可能包含更多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);
  }
}

这次它支持嵌套标签，它也支持所有可能的语法，没有非关闭标签的硬编码例外：）

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

2 个答案: