0

目前我正在处理分成浮动列的文本以某种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-tag 中，当高度大于周围元素时，我删除最后添加的序列并创建一个新的浮动 p-tag。当我把它分成句子时，我看到，分手并不​​足以确保良好的阅读流程。

我试图实现的一个例子你可以在这里看到

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

提前致谢，

托拜厄斯

编辑

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

编辑 2

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

编辑 3

删除所有带有封装文本的 html 标记并用占位符替换它是一个好主意吗？然后将字符串拆分为单词并在到达占位符时添加未触及的 html-tags？提取所有 html 标签的正则表达式是什么？

4

2 回答 2

3

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

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

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

于 2013-09-21T00:08:59.710 回答
3

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

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

于 2013-09-21T00:54:54.300 回答