<li></li> 사이에 특정 텍스트의 다른 스타일을 줄 바꿈하기 전에 콜론 ":"을 입력 하시겠습니까?

Question

내가 의미하는 바를 설명하려고하는 말로 자신을 잃기 전에, 다음은 내가 성취하고자하는 것을 보여주는 예입니다.

지금 얼마나 :

<ul> 
<li>My name: Sietse</li> 
<li>Country: The Netherlands</li> 
</ul> 

나는 싶습니다 방법 : 마크 업되어 내 웹 사이트에있는 기존 내용이 많이

<ul> 
<li><strong>My name:</strong> Sietse</li> 
<li><strong>Country:</strong> The Netherlands</li> 
</ul> 

있다 첫 번째 예제와 마찬가지로 두 번째 예제에 표시된 것처럼 LI의 콜론 (포함 할 수 있음)까지 텍스트를 동적으로 선택하고 스타일을 지정할 수있는 방법이 있습니까?

나는 그 문제에 대해 jQuery 나 자바 스크립트의 절대 초보자입니다.

미리 감사드립니다.

Answer 1

당신은 다음과 같은 시도

$('ul li').html(function (i, html) { 
 
    return html.replace(/(.*?:)/, '<strong>$1</strong>') 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>My name: Sietse</li> 
 
    <li>Country: The Netherlands</li> 
 
</ul>

Answer 2

처럼 .html() 및 문자열 replace()을 사용할 수 있습니다

$(function() { 
 
    $("ul li").each(function() { 
 
    if ($(this).text().indexOf(':') > -1) { 
 
     $(this).html('<strong>' + $(this).html().split(':').join(':</strong>')); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>My name: Sietse</li> 
 
    <li>Country: The Netherlands</li> 
 
</ul>