javascript - 尝试为孤立的单词构建一个小脚本:

我想编写一个非常简单的脚本来处理一些标题中的一些孤立单词。我以为我做得很整洁，但是第一句话就被切断了。对理解为什么有帮助吗？

var buddyUpOrphans = function(element, howMany) {
    $(element).each( function() {
        var $this = $(this);
        var thisText = $this.text().split(' ');
        var wordLength = thisText.length;
        thisText.splice( (wordLength - howMany), 0, '<nobr>');
        thisText.shift('</nobr>');
        thisText = thisText.join(' ');
        $this.html(thisText);
    });
};

CodePen

$(document).ready( function() {
    buddyUpOrphans('p', 2);
    buddyUpOrphans('.test1', 4);
});

最佳答案

.shift方法删除数组的第一个元素(并且不接受任何参数)，而似乎您想在数组的末尾添加一些内容。您可以为此使用.push方法。

由于您将<nobr>和</nobr>作为元素添加到数组，然后执行.join(" ")，因此确实会在其周围放置空格而产生意想不到的结果。

我建议在数组的某些元素的末尾串联<nobr>和</nobr>，而不是将它们插入到数组中。

var buddyUpOrphans = function(element, howMany) {
	$(element).each( function() {
		var $this = $(this);
		var thisText = $this.text().split(' ');
		var wordLength = thisText.length;
		thisText[wordLength - howMany - 1] += "<nobr>";
		thisText[wordLength - 1] += '</nobr>';
		thisText = thisText.join(' ');
		$this.html(thisText);
	});
};


$(document).ready( function() {
	buddyUpOrphans('p', 2);
	buddyUpOrphans('.test1', 4);
});

body {
	color: red;
}

nobr {
	color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='test1'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptates aperiam cumque, qui error, aliquam velit hic ad sapiente accusamus totam id similique repudiandae doloribus, optio consequatur, voluptatum maiores quod?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa laudantium rem ut id delectus at eaque inventore rerum, dolorem nisi alias modi asperiores recusandae nulla, iure. Facilis consequatur, impedit ipsa.</p>