Найти последнее слово в текстовой строке и завернуть в HTML

Question

Я получил текстовую строку, например:

<div id="ideal">The quick brown fox jumps over the lazy Stack Overflow user</div> 

Я хотел бы, чтобы обернуть последнее слово («пользователь») в HTML производить:

<div id="ideal"> 
    The quick brown fox jumps over the lazy 
    Stack Overflow <span class="foo">user</span> 
</div> 

до сих пор я разделить строку, используя пробелы и посмотрел на замену спичкой, но большинство решений использовать регулярное выражение, но регулярное выражение может быть слово, которое повторяется в другом месте в строке.

У меня есть следующие рабочие, используя подстроку в настоящее время:

var original = document.getElementById("ideal").textContent; 

var para = original.split(" "); 
var paracount = para.length; 
var wordtoreplace = para[paracount-1]; 

var idx = original.lastIndexOf(wordtoreplace); 
var newStr = original.substring(0, idx) + '<span class="foo">' + wordtoreplace + '</span>'; 

Но это работает только с помощью чистого яваскрипт и не как повторяемой функции во многих случаях из <div class="ideal">

Есть повторяемый способ использования javascript или jQuery для этого (через класс, а не id) для одного или нескольких экземпляров <div class="ideal">?

Answer 1

Вы могли бы сделать что-то вроде этого:

$('.ideal').each(function() { 
    var $this = $(this); 
    $this.html($this.html().replace(/(\S+)\s*$/, '<span class="foo">$1</span>')); 
}); 

The working demo.

Answer 2

Вы можете поместить свою логику в функцию, например wrapLast, и использовать JQuery.each для итерации всех согласованных элементов с помощью «.ideal».

$(".ideal").each(function(idx, node){ 
    wrapLast($(node)); 
}); 

я поставил простой пример на jsiddle

Answer 3

Это очень простой, ручной способ делайте это, есть лучшие способы, но это работает.

Шаги: разделите строку на массив, найдите длину массива и вычтите 1, чтобы получить последний элемент (b/c начинается с 0), и снова соедините его снова.

var strarr = array(); 
var str = 'The quick brown fox jumps over the lazy Stack Overflow user'; 
strarr = str.split(' '); 

// the -1 accounts for array starting at 0 
var wheremylastoneat = strarr.length - 1; 

// adds the class to the contents of the last element of the array 
strarr[wheremylastoneat] = '<span class="foo">'+strarr[strarrlen]+'</span>'; 

// puts the pieces back together 
str = strarr.join(); 

Answer 4

Вам нужно разделить текст, захватить последний элемент, выполнить свою работу и вернуться в массив.

var text = $('#ideal').text(); 
var arrText = text.split(' '); 
var arrLength = arrText.length 

arrText[arrLength-1] = '<span class="foo">' + arrText[arrLength-1] + '</span>'; 

$('#ideal').html(arrText.join(' ')); 

Рабочий пример: http://jsfiddle.net/sKZCa/1/

Answer 5

Вот хороший способ, если вы не против того, чтобы расширить прототип и будет использовать его много.

http://jsbin.com/esimed/1/edit

Element.prototype.wrapLastWord = function (left, right) { 
    var words = this.innerHTML.split(' '); 
    var lastWord = words[words.length - 1]; 
    words[words.length - 1] = left + lastWord + right; 
    this.innerHTML = words.join(' '); 
} 

Вы можете изменить это в другую функцию, не расширяя прототип.