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 属性应用于 div。所以实际上，将 div 视为线条渲染器。

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]);
        }
    }
}

这会将除最后一行之外的每一行的最后一句话记录到控制台。我把它留给你。这个解决方案的好处在于，即使在调整窗口大小后它也能正常工作。

顺便说一下，Yi Jiang他对 this question 的回答值得所有的赞扬在这里。