javascript如何使連字符後的所有字符串斜體？

大家早上好javascript如何使連字符後的所有字符串斜體？

我有一個與我的大商業產品題目有關的問題。在這裏我需要粗體的產品標題的第一部分，在連字符或短劃線之後，第二部分需要斜體。但問題在於產品標題帶有一個全局變量%% GLOBAL_ProductName %%，我無法使用span標記進行分隔。所以你可以建議我怎樣才能實現字符串連字符顯示後，在斜體與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 –

希望你明白，做好準備將商品全部打開並標註一個變量的商業機會就完成了！%% 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 –

如果產品名稱的第二部分再次包含短劃線（ - ），則此分割將不起作用。並且對於具有不同產品名稱的具有相同類名的多個div元素也不起作用。它總是需要最新的產品名稱。 –

分割將起作用，但不會將其附加到dom中。爲此，我們可以迭代數組並使用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如何使連字符後的所有字符串斜體？

回答

相關問題