하이픈 뒤에 모든 문자열을 기울임 꼴로 만드는 방법은 무엇입니까?

모두 좋은 아침

큰 상거래 제품 제목과 관련된 질문이 있습니다. 여기에서는 제품 제목의 첫 번째 부분이 굵게 표시되고 하이픈 또는 대시 뒤에 두 번째 부분이 기울임 꼴로 표시되어야합니다. 그러나 문제는 제품 제목에 하나의 전역 변수 %% GLOBAL_ProductName %%가 포함되어 있으므로 span 태그로 구분할 수 없습니다. 그래서 자바 스크립트의 도움으로 하이픈이 기울임 꼴로 표시된 후 나머지 문자열을 어떻게 얻을 수 있는지 제안 해 주시겠습니까?

예를 들어, 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 %%

제품 이름을 보여주는이 변수는 링크를 제공 한 스크린 샷과 웹 사이트를 확인하세요.