1

我有一个文本字符串，例如：

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

我想将最后一个单词（'user'）包装在 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>';

但这仅适用于纯 javascript，而不是在许多实例中的可重复函数<div class="ideal">

是否有一种可重复的方式使用 javascript 或 jQuery 对一个或多个实例执行此操作（通过类而不是 id）<div class="ideal">？

4

5 回答 5

9

你可以这样做：

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

工作演示。

于 2013-04-28T03:11:59.737 回答
1

Here's a nice way if you're not opposed to extending the prototype and will use it a lot.

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(' ');
}

You could change this into another function not extending the prototype.

于 2013-04-28T04:04:37.607 回答
1

您需要拆分文本，抓取最后一个元素，完成您的工作，然后重新加入数组。 

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/

于 2013-04-28T03:24:21.373 回答
1

您可以将您的逻辑放入一个函数中，例如 wrapLast，并使用 JQuery.each 用“.ideal”迭代所有匹配的元素。

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

我在jsiddle上放了一个简单的例子

于 2013-04-28T03:08:53.700 回答
0

这是一种非常简单的手动方法，有更好的方法，但它有效。

步骤：将字符串拆分为数组，找到数组长度并减去 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();
于 2013-04-28T03:23:23.280 回答