jquery - 使用 jQuery 突出显示长句子

Question

我想突出显示页面上的段落对象数组中包含的长句子（例如，50 个单词或更多），即$("#content p"). 我不知道如何解决这个问题。

我最初试图突出显示所有句子，但是当它们包含 HTML 标记时遇到了麻烦（网络上的示例突出显示代码似乎仅针对单个单词，因此它们不考虑子节点）。我知道拆分句子很困难。我想用.!? 后跟一个空格，然后是一个大写字母，或者什么都没有（即段落的结尾）。

提前感谢您的任何帮助/建议。

Answer 1

正如你所说，要做到正确会很棘手，因为你不会抓住所有这些，我会坚持一些简单的事情，比如：

var regex = \[^.!?]{50,}[.!?]\;

变得太聪明了，你最终会花更多的时间为边缘情况编码，而不是我想你会合理地想要的。

Answer 2

这可能是一个相当慢的解决方案，而且也很丑陋，但它应该非常简单编码：

将所有文本读入一个字符串，然后对其进行解析，计算字符数并找到每个 .!?-字符。在解析循环中，您还查找 < 和 >，其中 < 表示“忽略所有 .!? 直到找到另一个 >”。然后每次找到一个 .!? 字符时，检查自上一个字符以来的长度，如果它足够长，则将起点和终点的索引保存到数组或其他东西中。

当整个事情完成后，再做一个循环，将子字符串从第一个字符串移动到一个新字符串中，在每个“长句子”前面加上一个突出显示标签，并在它的末尾附加一个结束突出显示标签，之前继续。

完成后，将新字符串放回原来的位置...

Answer 3

我不确定最好的办法是在客户端执行此操作。我会考虑将这些段落发送回服务器来完成这项工作。但无论哪种方式，工作都应该是相同的。

首先获取段落的所有内容，确保在 DOM 中的几个节点中获取所有内容。（阅读本文）然后您将需要创建一个解析器来查找您的拆分字符，同时在它们位于 HTML 实体中时仍然忽略它们。

作为一个例子。在一个 href 属性应该被忽略而不是拆分。在进行解析时，您可以保持字数统计以及打破空格。使每个句子成为包含整个句子和字数的对象。因此，您可以将这些对象推送到表示段落的数组中。完成后，您可以遍历数组并将任何句子包装在一个跨度中，以便在字数达到您的阈值时使用 CSS 突出显示。

主要问题是标签可能是两个句子的一部分，如下所示。

I'm typing <b> in bold. NOW!</b>

我所说的并没有解决这个问题，但是您可以稍后使解析器更复杂以支持它。

因此，使用状态机快速概述我对所有字符的漫无边际的解析，该状态机处理单词计数并在正确的位置进行拆分。在拆分时，将您收集的数据添加到数组中。完成后遍历数组输出新包装的句子。

Answer 4

为此，您需要获取每个段落的 HTML ( node.html())，然后用相同数量的空格替换所有 HTML 标记。这应该是相当简单的，因为您可以只查找左尖括号和第一个右括号。您首先需要这样做，以防止标签内的任何句号和单词混淆算法的其余部分，还要防止标签本身被视为一个单词。

根据句号拆分文本，后跟任何内容或任何数量的空格以获取您的句子。您需要使用匹配的正则表达式手动执行此拆分，以便您可以跟踪原始字符串中句子的开始和结束位置。

接下来在空格上拆分每个句子，并从数组中删除仅由空格组成的任何“单词”。这给了你句子的长度。如果超出您的限制，则在原始 HTML 字符串中句子的开始和结束位置插入适当的 HTML。您需要跟踪添加了多少额外的 HTML，以便找到后续长句的正确开始和结束位置。