特定の文字の間にすべての単語を折り返します。

Question

私はさまざまな要素にいくつかのテキストを持っています。私が望むのは、特定の文字/ span要素内のすべての単語をラップすることです。以下の例を参照してください。

<ul> 
<li>/Lorem Ipsum/ has been the industry's standard.</li> 
<li>With desktop publishing software like Aldus PageMaker including versions of /Lorem Ipsum../</li> 
<li>There are /many/ variations of passages of /Lorem/ Ipsum available, but the..</li> 
</ul> 

私はこれが可能であると思っていました。私が知っている限り、あなたは要素ごとに1つの単語しか取ることができません。たとえば、この要素には/の間に2つの単語があります。

<li>There are /many/ variations of passages of /Lorem/ Ipsum available, but the..</li> 

は

<ul> 
<li><span class="wrapped">Lorem Ipsum</span> has been the industry's standard.</li> 
... 

Answer 1

コールバック関数を受け入れるhtml()で正規表現を使用し/\/(.*?)\//gであるべき。

正規表現は、スラッシュで囲まれた文字列と一致します。 (.*?)は、スラッシュ内の文字列を、置換部分で使用できる最初のキャプチャされたグループに追加します。

注：liの中にネストされたHTML要素がないと仮定しました。

$('ul li').html(function(i, html) { 
 
    return html.replace(/\/(.*?)\//g, '<span class="highlighted">$1</span>'); 
 
});

span.highlighted { 
 
    font-weight: bold; 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>/Lorem Ipsum/ has been the industry's standard.</li> 
 
    <li>With desktop publishing software like Aldus PageMaker including versions of /Lorem Ipsum../</li> 
 
    <li>There are /many/ variations of passages of /Lorem/ Ipsum available, but the..</li> 
 
</ul>