Todo List Sanitizing输入jQuery

Question

我正在制作一个简单的应用程序。一切正常，除非用户在输入中输入html元素，然后将其呈现为html。因此，例如，如果输入是h1标题/ h1，我得到单词＆＃34;标题＆＃34;使用默认的h1样式。 我现在谷歌搜索了2个小时，真的很想完成这个应用程序。 这是代码。

＆＃13;

＆＃13;

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 array
    var 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");
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

谢谢你的期待。 的 CodePen

Answer 1

您可以使用html模式删除input上的所有regex代码：

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

＆＃13;

＆＃13;

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 array
    var 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");
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您还可以创建模板并按.text()方法放置值。

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 array
    var 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");
});

<div class="main container">
  <div class="all container">
    <h1> My List </h1>
    <div class="buttons">
    <button id="newList" class="global-buttons"> New List </button>
    <button id="completeAll" class="global-buttons"> Complete All</button>
      </div>
    <div class="container list">
      <label> Input your to do </label>
      <input type="text" id="todoInput" placeholder="Input your to do here" name="todo" > 
      <button id="add" class="global-buttons"> Add to list </button>
      <ul  class="todoContainer">
      </ul>
    </div>
  </div>
</div>

<script type="template/text" id="todo-template">
  <li class="eachItem"> 
    <p class="todoItemStyle"></p>
    <button class="sm-btn" id="deleteButton"> delete </button>
    <button class="sm-btn" id="completeButton"> complete </button>
  </li>
</script>