1

たとえば、次のようなテキスト文字列があります。

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

生成する HTML で最後の単語('user')をラップしたいと思います。

<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">

の1つ以上のインスタンスに対して（IDではなくクラスを介して）これを行うためにjavascriptまたはjQueryを使用する繰り返し可能な方法はあります<div class="ideal">か？

4

5 に答える 5

9

You could do something like this:

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

The working demo.

于 2013-04-28T03:11:59.737 に答える
1

ロジックを wrapLast などの関数に入れ、JQuery.each を使用して、一致するすべての要素を「.ideal」で反復処理できます。

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

jsiddleに簡単な例を載せました

于 2013-04-28T03:08:53.700 に答える
1

プロトタイプの拡張に反対せず、頻繁に使用する場合は、次の方法をお勧めします。

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

これを、プロトタイプを拡張しない別の関数に変更できます。

于 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 に答える
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 に答える