Changing color of a certain word in a paragraph using js-CodePudding

$('#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){
        
    }
});

I'm creating a text editor using js.Here I'm using localStorage to store data and retrieve data.I need to add highlighting syntax feature.

For example : If 'h1' found from the text, color the 'h1' to red.I used ".includes() and it finds the word but I have no idea how to change the color of the found text.I really appreciate your help

CodePudding user response：

Try this solution:

1. Use a `contenteditable` element instead of `input` or `textarea`.

<div id="txtInput" contenteditable></div>

The reason is we need to display HTML with CSS inside of this input area.

2. Filter the result with highlight text.

// get highlight text from string
const highlighten = (string, highlight) => {
    string = stripHtml(string);

    // add highlight
    if (string.includes(highlight)) {
        string = string.replaceAll(highlight, `<span style="color:red">${highlight}</span>`);
    }
    return string;
};

Use replaceAll to set the highlight CSS. You can see the stripHTML() which is for cleaning the string before doing the filter.

3. Handle `keyup` event

// on keyup event
$('#txtInput').on('keyup', function(e) {
  const $input = $(e.currentTarget);

  // you can manage your localStorage data here
  // ...

  // filter the input
  $input.html(highlighten($input.html(), 'h1'));

  // set caret
  setCaretAtTheEnd($input.get());
});

As we replace the #txtInput with the new result, we will lose the caret position, that's why we need setCaretAtTheEnd() to set the caret back to the end of input.

// https://stackoverflow.com/questions/822452/strip-html-from-text-javascript
function stripHtml(html) {
  let tmp = document.createElement("DIV");
  tmp.innerHTML = html;
  return tmp.textContent || tmp.innerText || "";
}

// https://stackoverflow.com/questions/6249095/how-to-set-the-caret-cursor-position-in-a-contenteditable-element-div
function setCaretAtTheEnd(el) {
  var range = document.createRange()
  var sel = window.getSelection()
  const nodes = el[0].childNodes;
  let offset = 0;
  nodes.forEach((node, i) => {
    offset = node.length || 1;
  });


  range.setStart(nodes[nodes.length - 1], offset)
  range.collapse(true)

  sel.removeAllRanges()
  sel.addRange(range)
}

// get highlight text from string
const highlighten = (string, highlight) => {
  string = stripHtml(string);

  // add highlight
  if (string.includes(highlight)) {
    string = string.replaceAll(highlight, `<span style="color:red">${highlight}</span>`);
  }
  return string;
};

// on keyup event
$('#txtInput').on('keyup', function(e) {
  const $input = $(e.currentTarget);

  // you can manage your localStorage data here
  // ...

  // filter the input
  $input.html(highlighten($input.html(), 'h1'));

  // set caret
  setCaretAtTheEnd($input.get());
});

#txtInput {
  width: 400px;
  height: 200px;
  border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="txtInput" contenteditable>
</div>

CodePudding user response：

This should do it for you:

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

CodePudding user response：

You have to use jquery method addClass() and removeClass() in your programe while hasTest is true or false. I can not put code in code snnipet because StackOverflow don't allow localStorage.

Here down is code:

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. Use a contenteditable element instead of input or textarea.

2. Filter the result with highlight text.

3. Handle keyup event

1. Use a `contenteditable` element instead of `input` or `textarea`.

3. Handle `keyup` event