jQuery를 사용하여 특정 문자 색상 편집

-1

텍스트 상자에 쓸 때 내가 작성한 텍스트는 <p>으로 출력됩니다. 그러나 모든 편지 b, p 또는 d을 다른 색상으로 출력하고 싶습니다. 예를 들어 i like to drink beer 인 경우 d 및 b은 다른 색상이어야합니다. 이 작업을 수행하는 방법에 대한 도움이 필요하십니까?jQuery를 사용하여 특정 문자 색상 편집

$(document).ready(function() { 
 
    alert('welcome'); 
 
    $('button').click(function() { 
 
    var myText = $('input:text').val(); 
 
    $('p').html(myText); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text" placeholder="Place you text here =)" /> 
 
<button>Click me</button> 
 

 
<p></p>

출처

2016-10-19 fairytale

. regexp를 사용하고 입력을 조작하여 P에 다채로운 텍스트를 표시 할 수 있습니다. 동적 텍스트 관점에서, "나는 맥주를 마시는 것이 좋아"는 모든 첫 글자, 또는 어떤 단어의 첫 글자가 다른 색깔을 갖습니다. d와 b뿐만 아니라 원하는 색상이 다릅니다. –

출처

2016-10-19 11:36:03 Ultrazz008

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
     
 
function rep_str(str, str_find, color) { 
 
\t var reg = new RegExp(str, 'gi'); 
 
\t var final_str = str_find.replace(reg, function(str) {return str.fontcolor(color)}); 
 
\t return final_str; 
 
} 
 

 
    $(document).ready(function(){ 
 
     $('button').click(function(){ 
 
      var myText=$('input[type="text"]').val(); 
 
      myText = rep_str("b|d", myText, "Blue"); 
 
      myText = rep_str("p", myText, "Red"); 
 
      $('p').html(myText); 
 

 
     }); 
 
    }); 
 
    </script> 
 
    <body> 
 

 
    <input type="text" value="i like to drink beer" /> 
 
    <button>Click me</button> 
 

 
    <p></p>

는 문자열에서 해당 문자를 검색 할 수있는 span 요소를 래핑하는 정규 표현식을 사용할 수있는이 문제를 해결하려면 그러나 당신이 요구하는 스타일. 이 시도 : @RoryMcCrossan가 말했듯이, 입력 내의 텍스트가 많은 색상을 가질 수 없습니다

$(document).ready(function() { 
 
    $('button').click(function() { 
 
    var myText = $('input:text').val(); 
 
    $('p').html(myText.replace(/(b|d|p)/gi, '<span>$1</span>')); 
 
    }); 
 
});

span { 
 
    color: #C00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text" placeholder="Place you text here =)" value="Vestibulum imperdiet malesuada elit" /> 
 
<button>Click me</button> 
 

 
<p></p>

출처

2016-10-19 11:38:23

jQuery를 사용하여 특정 문자 색상 편집

답변

관련 문제