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

。正規表現を使用して入力を操作することで、Pにカラフルなテキストを表示することができます。動的テキストの観点では、「私はビールを飲むのが好きです」では、すべての最初の文字、または任意の単語の最初の文字が異なる色になります。 dとbだけでなく、あなたが望むように異なる色になります。 –

<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>

出典

2016-10-19 11:36:03 Ultrazz008

あなたは、文字列に関連する文字を検索し、することができ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を使用して特定の文字色を編集する

答えて

関連する問題