JavaScript - 获取一行中的最后一个单词

Question

这是一个例子：

<div><span style="font-size:15px;">some text here which is </span>
<span style="color:red;">split automatically by the browser.</span></div>

浏览器会根据样式渲染出如下内容：

some text here which is split
automatically by the browser.

我正在开发一个javascript应用程序，需要理解每行的最后一个单词（在这种情况下使用split）。目前，我正在使用CSS的white-space属性处理溢出文本。因此，浏览器无法提示文本在何处换行。那么，有什么好的函数可以理解每行的最后一个单词呢？

编辑：我正在使用纯JavaScript，所以jQuery不是可选项，并且white-space属性应用于

。因此，请将

视为一行渲染器。

- Savas Vedova

---

这些行是否总是由span包裹？jQuery是一个选项还是只能使用纯JS？ - Joseph

https://dev59.com/aFbTa4cB1Zd3GeqP8z_R - msanford

@msanford，我已经检查了那个问题，但它并没有回答我的问题。它实际上会返回每个元素中的最后一个单词，而不是行中的最后一个单词。 - Savas Vedova

@JosephtheDreamer 我认为缺少jQuery标签就足以回答你的第二个问题。 - ajax333221

@ajax333221 只是确认一下。经常有人回答一个真正的JS方法，但被另一个使用jQuery的答案所超越，因为问题提出者惊讶于它只需要更少的代码就能工作。 - Joseph

Answer 1

你可以逐字逐句地重写整个句子，跟踪高度变化。以下是一些代码示例的解释：

HTML：

<div id="flop" class="foobar">Lorem ipsum dolor sit amet, consectetur adipisicing 
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur.</div>
<br>
<button value="Go" onclick="foo();">Go</button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

脚本：

function foo(){
    var d = document.getElementById('flop');
    var t = d.innerHTML;
    var w = t.split(' ');       

    d.innerHTML = w[0];
    var height = d.clientHeight;
    for(var i = 1; i < w.length; i++){
        d.innerHTML = d.innerHTML + ' ' + w[i];

        if(d.clientHeight > height){
            height = d.clientHeight;
            console.log(w[i-1]);
        }
    }
}

这将记录每行的最后一个词到控制台，除了最后一行。那就由你来完成。这个解决方案的好处是即使窗口大小改变，它也能正确工作。

顺便说一下，在SO上，Yi Jiang 对这个问题的回答应得所有功劳。

- Satyajit