Todo List Sanitizing Input Jquery

I am working on a simple to do app. Everything works, except, if the user inputs an html element into the input, then it gets rendered as html. So, for instance if the input is h1

Solution 1:

You can strip all html tags on input with a regex pattern:

$("#todoInput").val().replace(/(<([^>]+)>)/ig,"");

var todoList = [];

$("#add").on("click", function() {
  var todoItem = $("#todoInput").val().replace(/(<([^>]+)>)/ig,"");
  if (!todoItem.trim()) {
    alert("please enter a to do");
  } else {
    todoList.push(todoItem);

    //empty the input field on click
    $("#todoInput").val("");

    //add a mark complete button to every array item//publish arrayvar addedTodo = todoList[todoList.length - 1];
    console.log(addedTodo);
    $(".todoContainer")
      .append(
        '<li class="eachItem">' +
        '<p class="todoItemStyle">' + addedTodo +
        '</p><button class="sm-btn" id="deleteButton"> delete </button> <button class="sm-btn"  id="completeButton"> complete </button></li>'
      )
      .addClass("todoStyle");
  }
});

//add button to complete all items
$("#completeAll").on("click", function() {
  $(".todoItemStyle").toggleClass("completed");
});

//add button to restart list
$("#newList").on("click", function() {
  todoList = [];
  $(".todoContainer").html("");
});

//button to remove a todo
$("body").on("click", "#deleteButton", function() {
  $(this).parent().remove();
  console.log("delete button pressed");
});

//button to complete a todo
$("body").on("click", "#completeButton", function() {
  $(this).siblings(".todoItemStyle").toggleClass("completed");
  console.log("completed clicked");
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="main container"><divclass="all container"><h1> My List </h1><divclass="buttons"><buttonid="newList"class="global-buttons"> New List </button><buttonid="completeAll"class="global-buttons"> Complete All</button></div><divclass="container list"><label> Input your to do </label><inputtype="text"id="todoInput"placeholder="Input your to do here"name="todo"><buttonid="add"class="global-buttons"> Add to list </button><ulclass="todoContainer"></ul></div></div></div>

Solution 2:

You can also create a template and place the value by .text() method.

var todoList = [];



$("#add").on("click", function() {
  var todoItem = $("#todoInput").val();
  if (!todoItem.trim()) {
    alert("please enter a to do");
  } else {
    todoList.push(todoItem);

    //empty the input field on click
    $("#todoInput").val("");
    
    //add a mark complete button to every array item//publish arrayvar addedTodo = todoList[todoList.length - 1];
    console.log(addedTodo);
      
    var template = $('#todo-template').html();
    $(template).appendTo('.todoContainer').find('.todoItemStyle').text(addedTodo).addClass("todoStyle");
    
  }
});

//add button to complete all items
$("#completeAll").on("click", function() {
  $(".todoItemStyle").toggleClass("completed");
});

//add button to restart list
$("#newList").on("click", function() {
  todoList = [];
  $(".todoContainer").html("");
});

//button to remove a todo
$("body").on("click", "#deleteButton", function() {
  $(this).parent().remove();
  console.log("delete button pressed");
});

//button to complete a todo
$("body").on("click", "#completeButton", function() {
  $(this).siblings(".todoItemStyle").toggleClass("completed");
  console.log("completed clicked");
});

<divclass="main container"><divclass="all container"><h1> My List </h1><divclass="buttons"><buttonid="newList"class="global-buttons"> New List </button><buttonid="completeAll"class="global-buttons"> Complete All</button></div><divclass="container list"><label> Input your to do </label><inputtype="text"id="todoInput"placeholder="Input your to do here"name="todo" ><buttonid="add"class="global-buttons"> Add to list </button><ulclass="todoContainer"></ul></div></div></div><scripttype="template/text"id="todo-template"><liclass="eachItem"><pclass="todoItemStyle"></p><buttonclass="sm-btn"id="deleteButton"> delete </button><buttonclass="sm-btn"id="completeButton"> complete </button></li></script>