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如何使连字符后的所有字符串斜体？

回答

相关问题