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 %%
这个变量显示产品名称请查看我所提供的链接
截图和网站
如果你在你的网站上使用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>
感谢您的帮助@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>
尽可能在服务器端进行这种拆分。因为客户端你会在加载页面后操纵字符串。所以在客户端做事不好。但无论如何,我写了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>
请[编辑]你的问题,你接受他们,你想怎么看他们格式化的问题直接显示相关的代码,以产品名称的一些例子一起。 – nnnnnn
谢谢你的关注,你检查了网站链接http://rp-staging2.mybigcommerce.com/categories –
希望你明白,做好准备将商品全部打开并标注一个变量的商业机会就完成了!%% GLOBAL_ProductName %% –