jquery - 文字列の一部をスタイルする関数

Question

誰でもこれについてアドバイスできますか？文字列の最後の 3 文字を取り、異なるスタイルにする jquery 関数を作成しようとしています。私の場合、フォントサイズの半分。

したがって、€100.50 のような文字列では、.50 は小さくなります。

誰かが私を正しい方向に向けることができますか? または、プラグイン/スクリプトが既に存在する場合はお知らせください

ありがとう！

12月

Answer 1

必要な文字列の長さを取得してその最後の3文字を切り取り、それらを新しい文字列に入れて、必要なクラスの新しいタグ（スパンなど）に入れる関数を使用できるかもしれません。

Answer 2

誰かが私を正しい方向に向けることができますか? ...

replaceテキストをタグで囲み、CSS でスタイルを設定するクラスを追加します。

$el.html( $el.text().replace(/.{3}$/, '<span class="small">$&</span>') );

デモ: http://jsbin.com/epuzag/4/edit

Answer 3

私はよく次のようなフォーマッターを使用します。

HTML

<div id="price"></div>

CSS

.decimal {
 font-size:10px; 
 color:black;
}

JS

function formatPrice(price, containerId, digits) {

  var startStr,
      endStr,
      containerElem = $("#"+containerId);

  //cut last specified digits
  startStr = price.substr( 0, price.length - digits );
  endStr = price.substr( price.length - digits, price.length );

  //DOM elements

  $("<span/>")
    .text(endStr)
    .addClass("decimal")
    .appendTo(containerElem)
    .parent()
    .prepend(startStr);
}

var price = "€100.50";
formatPrice(price, "price", 3);

Answer 4

変更するテキストは、クラスまたはインライン スタイルを追加して CSS を調整できる別の html 要素でラップする必要があります。

この見つめている html を想定し、jQuery を使用して変更された text/html を取得および設定します。

<span>€100.50</span>

.

$('span').html(function(idx, oldHtml) {
    var startStr = oldHtml.substring(0, oldHtml.length - 3)
    var endStr = '<small>' + oldHtml.substring(oldHtml.length - 3) + '</small>'
    return startStr + endStr;

});

デモ: http://jsfiddle.net/vJ63t/

Answer 5

これを試して：

function formatString( txt ) {

    var i = txt.lastIndexOf( "." ); 
    if( i === -1 ) return txt; // if txt => $10 return

    return txt.slice( 0, i ) + "<span class='smaller'>" + txt.slice( i ) + "</span>";
}

Answer 6

まあ、必ずしも jquery を含むわけではありません。スタイル付き DIV へのパラメータ ラップとして文字列を取得できます。

何かのようなもの：

 txt = $("#id").text();
 txt = style_string(txt);

 function style_string(string){
      ...
     if(){
        string = "<div class='class-to-style'>" +string+"</div>"
      }....

 }