javascript - 我可以将每一行多行文本包装在一个跨度中吗？

Question

我一直在试图弄清楚如何做到这一点(如果可能的话)并且画了一个空白......

我有一些文本会换行。我想检测每一行，并将其包装在一个跨度中。最后，我想为循环数组中的每个跨度分配一个类。

例如...!

<div id="quote">
    I have some text that
    wraps onto three lines
    in this container
</div>

我想让我的 jQuery 解析这些行，检测它在哪里换行，然后把它变成这样:

<div id="quote">
    <span class="red-bg">I have some text that</span>
    <span class="orange-bg">wraps onto three lines</span>
    <span class="yellow-bg">in this container</span>
</div>

我想动态地执行此操作的原因是我在响应式模板中执行此操作，因此有时相同的文本只会换行成两行，或者在 iPhone 中可能是四行。

这可行吗？我找到了这个 -> http://vidasp.net/tinydemos/numberOfLines.html它计算一段文本中使用的行数，但这并没有真正扩展到做我需要的。

Answer 1

您似乎在问如何在浏览器自然包裹的位置拆分文本。不幸的是，这根本不是直截了当的。它也不健壮——考虑以下场景:

• 用户浏览到您的页面，呈现 div 并触发 onload 事件，
• 从文本节点创建 3 个 span 元素，每个换行文本 1 个，
• 用户调整浏览器大小，div 的大小发生变化。

结果是跨度不再与线条的开始和结束位置相关。当然，使用固定宽度的元素可以避免这种情况，或者您可以在浏览器调整大小时调整整个元素，但这只是它如何中断的一个示例。

不过，这并不容易。 similar question 之前已经出现(尽管目标不同)并且出现了两个解决方案，它们在这里可能都有帮助:

Solution 1: getClientRects()

实际上不要将文本包裹在 span 中，而是使用 getClientRects() 获取每行文本的位置和尺寸。然后，创建必要的跨度数，并将它们放置在每行文本后面/调整它们的大小。

优点

• 快速； getClientRects 返回每一行的位置
• 简单；代码比方案2更优雅

缺点

• 换行的文本必须包含在行内元素中。
• 没有样式会实际应用于文本(如字体粗细或字体颜色)。仅对背景颜色或边框等有用。

The demo provided 的答案显示了如何突出显示当前鼠标下方的文本行。

Solution 2: Split, join, loop, merge

使用 split() 方法将文本拆分为一个数组，并将单词边界或空格作为参数传递。将数组重新加入每个元素之间带有 </span><span> 的字符串，并用 <span> 和 </span> 包装整个内容，并用包含元素中生成的 HTML 替换原始文本节点。现在，遍历每个 span 元素，检查其在容器中的 y 位置。当 y 位置增加时，您知道您已经到达了新的一行并且之前的元素可以合并到一个跨度中。

优点

• 每一行都可以使用任何 CSS 属性设置样式，例如 font-weight 或 text-decoration。
• 每一行都可以有自己的事件处理程序。

缺点

• 由于大量的 DOM 和字符串操作，速度慢且笨重

结论

可能还有其他方法可以实现您的目标，但我自己也不确定。当传递要拆分的字符的数字索引时，TextNode.splitText(n) 可以将 TextNode 拆分为两个(!)。上述解决方案都不是完美的，并且一旦包含元素调整大小时都会失效。