Как изменить цвет указанной c части строки, присутствующей внутри специальных символов, используя jQuery - PullRequest
Новая
       0

Как изменить цвет указанной c части строки, присутствующей внутри специальных символов, используя jQuery

1 голос
/ 20 июня 2020

Запустите фрагмент кода, чтобы вы могли знать, что именно я пытаюсь сказать.

Я хочу указать c часть моей строки, заключенную в специальные символы (например, [] в моем случае ), чтобы изменить его цвет.

Я хочу добиться этого, получая строку из <input type="text" />

Я могу получить строку (присутствует внутри [ ] ) успешно, но я не могу изменить цвет указанной c части строки. Ниже представлено то, что я пробовал до сих пор 

```
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    <style>
        body{
        background:rgba(20,30,20,0.99);
        }
        div{
        color:orange;
        }
    </style>
</head>
<body>
    <input type="text" style="height:100px; width:250px; overflow:auto;" id="inp" placeholder="for example type: this is [great] book john" />
    <p style="color:white;" id="dis"></p>
    <div></div>
    <script>
        $(function (){
        $("#inp").on("input" , function(){
        var inpt = $(this).val();
        $("#dis").html(inpt);
        var det1 = inpt.indexOf("[");
        var det2 = inpt.indexOf("]");
        var rpl = inpt.slice(det1 , parseInt(det2)+parseInt(1));
        var ptxt = $("#dis").text();
        if(det1 != -1 && det2 != -1){
        var lgnt = ptxt.length;
        var pslic = ptxt.slice(det1 , parseInt(det2)+parseInt(1));
        pslic.fontcolor("skyblue");
        ptxt.replace(ptxt.slice(0 , det1)+pslic+ptxt.slice(parseInt(det2)+parseInt(1) , lgnt));
        $("div").html(">>> "+pslic+"<<< <br> replacement executed successfully, check if color of "+pslic+" inside the white line is modified?");
        }
        });
        });
    </script>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 20 июня 2020

Вы можете получить indexOf последнего символа, например: ] из pslic, а затем мы будем использовать его, чтобы добавить тег <span> в начало строки после [ и добавить закрывающий </span> перед конец ], затем примените требуемый цвет к тексту, используя css.

Код демонстрации : 

$(function() {
  $("#inp").on("input", function() {
    var inpt = $(this).val();
    $("#dis").html(inpt);
    var det1 = inpt.indexOf("[");
    var det2 = inpt.indexOf("]");
    var rpl = inpt.slice(det1, parseInt(det2) + parseInt(1));
    var ptxt = $("#dis").text();
    if (det1 != -1 && det2 != -1) {
      var lgnt = ptxt.length;
      var pslic = ptxt.slice(det1, parseInt(det2) + parseInt(1));
      //getting lst index of lst elemnt
      var end = pslic.indexOf("]");
      //leaving first char i.e : "[" ->add <span> "text" </span>-> "]" 
      var new_datas = pslic.substring(0, 1) + "<span>" + pslic.substring(1, end) + "</span>" + pslic.substring(end, pslic.length);

      ptxt.replace(ptxt.slice(0, det1) + pslic + ptxt.slice(parseInt(det2) + parseInt(1), lgnt));
      //adding new_dats to div
      $("div").html(">>> " + new_datas + "<<< <br> replacement executed successfully, check if color of " + new_datas + " inside the white line is modified?");
    }
  });
});
span {
  color: skyblue;
}

body {
  background: rgba(20, 30, 20, 0.99);
}

div {
  color: orange;
}
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>

<body>
  <input type="text" style="height:100px; width:250px; overflow:auto;" id="inp" placeholder="for example type: this is [great] book john" />
  <p style="color:white;" id="dis"></p>
  <div></div>

</body>

</html>
0 голосов
/ 20 июня 2020

Используйте переключатель contains (). 

$(":contains('"+pslic+"')").css('color','skyblue');

Сообщите мне, работает ли он. Если у вас есть похожие тексты на одной странице, это повлияет на всех.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...