javascript 如何让连字符后的所有字符串都变成斜体？

Question

大家早上好

我有一个与我的大型商业产品标题相关的问题。在这里，我需要产品标题的第一部分以粗体显示，在连字符或破折号之后的第二部分需要以斜体显示。但问题是产品标题带有一个全局变量 %%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%%

这个显示产品名称的变量请查看我提供的截图和网站link

Answer 1

使用一些很酷的 es6 特性（数组解构和模板文字）

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

看起来像：

Answer 2

如果您在您的网站中使用 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>

Answer 3

如果有帮助，请检查...

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>

Answer 4

尽可能在服务器端进行这种拆分。因为在客户端，您将在加载页面后操作字符串。所以在客户端做是不好的。但无论如何，我已经编写了 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>

javascript 如何让连字符后的所有字符串都变成斜体？

javascript how to make all strings italic after hyphen?

javascript

jquery

bigcommerce