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

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 拆分为 twain (!)。上述解决方案都不是完美的，一旦包含元素调整大小，它们都会中断。

Answer 2

我将 a fiddle 放在一起，实施了 Andy E 的解决方案 #2（上图）。 IE。拆分、连接、循环、合并

算法如下：

var spanInserted = $('#someText').html().split(" ").join(" </span><span>");
var wrapped = ("<span>").concat(spanInserted, "</span>");
$('#someText').html(wrapped);
var refPos = $('#someText span:first-child').position().top;
var newPos;
$('#someText span').each(function(index) {
    newPos = $(this).position().top   
    if (index == 0){
       return;
    }
    if (newPos == refPos){
        $(this).prepend($(this).prev().text() + " ");
        $(this).prev().remove();
    } 
    refPos = newPos;
});

享受...

Answer 3

var classes = ",red-bg,orange-bg,yellow-bg".split(",")
var txt = $('#quote').html().split("\n")
//this gives you FIVE items because of the leading and trailing CRs
//so we skip the first and last item in the loop
var output = ""
for(var x=1;x<txt.length-1;x++) {
    output = output + "<span class='"+classes[x]+"'>"+txt[x]+"</span>"
}
$('#quote').html(output)

Answer 4

这将为您提供文本节点，但我不确定它是否有帮助

$("#quote")
  .contents()
  .filter(function() {
    return this.nodeType == 3;
  })