Изменение цвета определенного слова в абзаце с помощью js

Question

$('#txtInput').keyup(function(){

    var txtInput = $(this).val();

    localStorage.setItem('inputData', txtInput);

    var returnData = localStorage.getItem('inputData');
    $('#txtInput').val(returnData);

    var hasTest = returnData.includes("<h1>");

    if(hasTest == true){
        
    }
});

Я создаю текстовый редактор с помощью js. Здесь я использую localStorage для хранения и извлечения данных. Мне нужно добавить функцию выделения синтаксиса.

Например: если в тексте найдено «h1», покрасьте «h1» в красный цвет. Я использовал «.includes(), и он находит слово, но я понятия не имею, как изменить цвет найденного текста. Я очень ценю ваша помощь

javascript jquery

1

destr0id 4 Фев 2022 в 08:04

Answer 1

Это должно сделать это за вас:

if (hasTest == true) {
  returnData = returnData.replace('<h1>', '<h1 style="color:red">')
  $('#txtInput').val(returnData);      
}

-1

Kevin Hutchinson 4 Фев 2022 в 08:11

Answer 2

Вы должны использовать методы jquery addClass() и removeClass() в своей программе, пока hasTest является истинным или ложным. Я не могу поместить код во фрагмент кода, потому что StackOverflow не разрешает localStorage.

Вот код:

CSS

.red { 
    color:red; 
}

.black
{
    color:black; 
}

HTML

<html>
<head>
<title> </title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="txtInput"/>
</body>
</html>

jQuery

$('#txtInput').keyup(function(){

    var txtInput = $(this).val();

    localStorage.setItem('inputData', txtInput);

    var returnData = localStorage.getItem('inputData');
    $('#txtInput').val(returnData);

    var hasTest = returnData.includes("<h1>");

    if(hasTest == true){
        $("#txtInput").removeClass("black");
        $("#txtInput").addClass("red");
    }
    else
    {
        $("#txtInput").removeClass("red");
        $("#txtInput").addClass("black");
    }
});

-1

Faeemazaz Bhanej 4 Фев 2022 в 08:29

По любой причине мой ответ был отклонен без комментариев. На мой взгляд, в моем ответе нет ничего плохого. Если проблема в моем ответе, найдите лучшее решение с вашим ответом.

–

Faeemazaz Bhanej

4 Фев 2022 в 08:37

Я прошу StackOverflow принять меры в отношении тех, кто слепо проголосовал против ответа из-за зависти или забавы. Это происходит ранее на мой ответ. Мой ответ правильный, но кто-то прямо проголосовал без комментариев.

–

Faeemazaz Bhanej

4 Фев 2022 в 08:49

Изменение цвета определенного слова в абзаце с помощью js

2 ответа

Новые вопросы

javascript