javascriptハイフンの後にすべての文字列をイタリック体にする方法は？

おはようございますjavascriptハイフンの後にすべての文字列をイタリック体にする方法は？

私は大きな商用製品のタイトルに関する質問があります。ここでは、製品のタイトルの最初の部分を太字で、ハイフンまたはイタリックで2番目の部分を必要としています。しかし問題は、製品のタイトルには、spanタグで区切られないグローバル変数%% GLOBAL_ProductName %%が1つ含まれていることです。だから、私はどのようにJavaScriptの助けを借りてイタリック体でハイフンショーの後に残りの文字列を達成することができますか？

たとえば、このスクリーンショットをチェックしhttps://www.screencast.com/t/fKy0FhByzzl 、ここでは大きなコマースサイトですhttp://rp-staging2.mybigcommerce.com/categories

<li class="%%GLOBAL_AlternateClass%%"> 
    <div class="ProductImage" data-product="%%GLOBAL_ProductId%%"> 
     %%GLOBAL_ProductThumb%% 
    </div> 
    <div class="OutOfStockMessage InfoMessage" style="%%GLOBAL_ItemSoldOut%%"> 
     %%SNIPPET_SideAddItemSoldOut%% 
    </div> 
    <div class="ProductActionAdd" onclick="location.href='%%GLOBAL_ProductLink%%';"> 
     <p><a href="%%GLOBAL_ProductLink%%" class="%%GLOBAL_SearchTrackClass%% pname">%%GLOBAL_ProductName%%</a> 
     </p> 
     <p><em class="p-price">%%GLOBAL_ProductPrice%% USD</em> 
     </p> 
     <a href="%%GLOBAL_ProductURL%%" class="btn icon-%%GLOBAL_ProductAddText%%" title="%%GLOBAL_ProductAddText%%">%%GLOBAL_ProductAddText%%</a> 
    </div> 
</li>

%% GLOBAL_ProductName %%

この変数上映製品名私はリンク

を提供してきたスクリーンショットやウェブサイトをチェックしてください

出典

2017-03-01 R.K.Bhardwaj

してください[編集]あなたの質問あなたがそれらを受け取ると、製品名のいくつかの例と一緒に、質問に直接関連するコードを表示するとどのようにあなたがそれらをフォーマットしてもらいたいです。 – nnnnnn

返信ありがとうございます。あなたはウェブサイトのリンクを確認しましたか？http://rp-staging2.mybigcommerce.com/categories –

この変数は、1つの変数%% GLOBAL_ProductName %% –

いくつかのクールなes6機能（配列の構造化とテンプレートリテラル）の使用

$(".pname").each(function() { 
    [beforeDash, afterDash] = $(this).text().split(" - "); 
    $(this).html(`${beforeDash} - <i>${afterDash}</i>`); 
});

は、次のようになります。

出典

2017-03-01 05:36:29 Keatinge

完璧な男性、これは私が正確に必要なものです。 –

分割にスペースを入れる必要はありません。スプリットは（ - ）でのみ必要なためです。分割は、最初の発生時にのみ必要です。 str.split（ " - "）は単語の配列を返します。 –

そして、あなたはあなたのウェブサイトでのjQueryを使用している場合、あなたはこのようなものを使用することができます

$(window).on("load", function(){ 
 
    var text = $('.text'); 
 
    var x = text.text().split('-'); 
 
    text.html(`${x[0]} - <i>${x[1]}<i>`); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="text"> 
 
    Hello - World 
 
</div>

出典

2017-03-01 05:40:31

助けてくれてありがとう@Saurabh Sharma –

製品名の2番目の部分にダッシュ（ - ）が含まれていると、この分割は機能しません。同じ商品名で同じクラス名を持つ複数のdiv要素では動作しません。常に最新の製品名が必要です。 –

分割は機能しますが、分割しても分割されません。その目的のために、配列を繰り返し処理し、append（）を使ってdomに値を追加することができます。複数の要素がある場合は、各要素を反復処理するためにイテレータを使用し、$（this）を使用してロジックを使用できます。そして、私の答えは問題の解決策ではなく、問題を解決する方法でした。 –

それが助け場合は、これを確認します。 ..

https://jsfiddle.net/Lz8p11mc/1/

製品名を ' - 'で分割し、これらの分離された名前を別々のスパンに追加し、必要に応じてこれらのスパンをスタイルする必要があります。私は簡単なテストケースのためのコードを書いています、あなたの要件に応じてそれを変更することができます。

<html> 
<script> 
     var productName = 'ABC-XYZ'; 
     var separatedNames = productName.split('-'); 
     var firtsName = separatedNames[0]; 
     var secondname = separatedNames[1]; 

    window.onload = function() { 
    //when the document is finished loading, replace everything 
    //between the <a ...> </a> tags with the value of splitText 
    document.getElementById("myTag").innerHTML = '<span>'+firtsName+'</span>-<span class="secondnameCls">'+secondname+'</span>'; 
    } 

</script> 

<body> 
    <li class="%%GLOBAL_AlternateClass%%"> 
    <p><a id='myTag'></a></p> 
    </li> 
</body> 

</html>

出典

2017-03-01 05:48:34 Harshal

可能な限り、この種の分割はサーバー側で行います。クライアント側では、ページをロードした後に文字列を操作します。だから、クライアント側で行うのは良いことではありません。しかし、とにかく私はあなたの要件を満たすためにjqueryコードを書いています。私はデモのためにクリックイベントで書いています。 onloadイベントでロジックを実行してください。

$("#btn").click(function(){ 
 
$(".productName").each(function(){ 
 
var title = $(this).text(); 
 
var firstSentence = "<b>"+title.substr(0,title.indexOf('-'))+"</b>"; 
 
var secondSentence = "<i>"+title.substr(title.indexOf('-')+1)+"</i>"; 
 

 
var finalTitle = firstSentence+ "-" + secondSentence; 
 

 
$(this).html(finalTitle); 
 

 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
</head> 
 
<body> 
 
<a class="productName"> Sample1 - Product Name1</a><br> 
 
<a class="productName"> Sample2 - Product Name2</a><br> 
 
<input id="btn" type="button" value="Change Format"> 
 
</body> 
 
</html>

出典

2017-03-01 06:00:08

javascriptハイフンの後にすべての文字列をイタリック体にする方法は？

答えて

関連する問題