Блог

Главная - Вопросы по программированию - Редактировать определенный цвет буквы с помощью jQuery

Редактировать определенный цвет буквы с помощью jQuery

#jquery #html

#jquery #HTML

Вопрос:

Когда я пишу в текстовом поле, текст, который я написал, будет выведен в <p> . Однако я хочу, чтобы все мои буквы b , p или d выводились другим цветом. Например, i like to drink beer буквы d и b должны быть разных цветов. Любая помощь, как это сделать? 

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

Комментарии:

1. Как сказал @RoryMcCrossan, текст внутри ввода не может иметь много цветов. Вы можете отображать цветной текст в P с помощью регулярного выражения и манипулировать вводом. В динамической текстовой перспективе в «я люблю пить пиво» каждая первая буква или 1-я буква любого слова будет иметь разный цвет. Не только d и b будут иметь другой цвет, как вы хотите.

Ответ №1:

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

Ответ №2:

Чтобы решить эту проблему, вы могли бы использовать регулярное выражение для поиска соответствующих символов в строке и обернуть их в span элемент, который может быть оформлен так, как вам требуется. Попробуйте это:

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