将包含HTML的字符串转换为句子，并使用Javascript保留分隔符

Question

这是我的绳子。它包含一些HTML:

第一句。这里是一个

我想将字符串拆分为句子（数组），保留超文本标记语言和分隔符。像这样：

[0] = First sentence.
[1] = Here is a <a href="http://google.com">Google</a> link in the second sentence!
[2] = The third sentence might contain an image like this <img src="http://link.to.image.com/hello.png" /> and ends with !?
[3] = The last sentence looks like <b>this</b>??

有人可以建议我一种方法吗？可能正在使用正则表达式和匹配？

这与我所追求的非常接近，但并不是真正的HTML位：JavaScript Split正则表达式保留分隔符




Answer 1

简单的部分是解析;您可以通过在字符串周围包裹元素来轻松完成此操作。拆分句子稍微复杂一些;这是我第一次尝试它：

var s = 'First sentence. Here is a <a href="http://google.com">Google.</a> link in the second sentence! The third sentence might contain an image like this <img src="http://link.to.image.com/hello.png" /> and ends with !? The last sentence looks like <b>this</b>??';

var wrapper = document.createElement('div');
wrapper.innerHTML = s;

var sentences = [],
buffer = [],
re = /[^.!?]+[.!?]+/g;

[].forEach.call(wrapper.childNodes, function(node) {
  if (node.nodeType == 1) {
    buffer.push(node.outerHTML); // save html
  } else if (node.nodeType == 3) {
    var str = node.textContent; // shift sentences
    while ((match = re.exec(str)) !== null) {
      sentences.push(buffer.join('') + match);
      buffer = [];
      str = str.substr(re.lastIndex + 1);
      re.lastIndex = 0; // reset regexp
    }
    buffer.push(str);
  }
});

if (buffer.length) {
  sentences.push(buffer.join(''));
}

console.log(sentences);

演示

元素或未完成句子的每个节点都被添加到缓冲区，直到找到完整的句子；然后将其添加到结果数组中。