在javascript数组中转义html字符

Question

I would like to escape some html characters that I have stored in an array.

var quiz = [{
    "question": "How would we use css to select an element with <h1 class = \"intro\">",
    "choices": [".intro{ property: attribute }", "intro{ property :attribute }", "#intro{property: attribute }"],
    "correct": ".intro{ property: attribute }"
}, {
    "question": "How would we select the element with id firstname <p id=\"firstname\">?",
    "choices": ["#firstname{ property: attribute }", ".firstname{ property: attribute }", "who cares?"],
    "correct": "#firstname{ property: attribute }"
}, {
    "question": "How would we select all elements?",
    "choices": ["#{ property: attribute }",  "@all{ property: attribute }", "*{ property: attribute }"],
    "correct": "*{ property: attribute }"
}, {
    "question": "what does this do div > p?",
    "choices": ["Selects all <p> elements inside <div> elements", "Selects <p> element that is a child of <div>", "Selects all <p> that are placed immediately after <div>"],
    "correct": "Selects <p> element that is a child of <div>"
}, {
    "question": "what does div + p do?",
    "choices": ["Selects all <div> and <p> elements", "Selects all <p> elements inside <div> elements", "Selects all <p> elements that are placed immediately after <div> elements"],
    "correct": "Selects all <p> elements that are placed immediately after <div> elements"
}];

I know that there are multiple answers to escaping html tags within javascript. For example I found this function which is very straightforward.

var htmlString = "<h1>My HTML STRING</h1><p>It has html characters & such in it.</p>";
  $(document).ready(function(){
      $("#replaceDiv").text(htmlString)
   });

However, all the solutions I have seen require creating a function assigning variables etc. This seems overly complicated. Is there any easier way to accomplish my goals here?

Answer 1

Thanks @GrawCube for help in the chat room.

Solution was to create an escape function and then parse the quiz array.

function escapeHtmlChars(unsafe) {
    return unsafe
        .replace(/&/g, "&")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

for (var i = 0; i < quiz.length; i++) {
    quiz[i].correct = escapeHtmlChars(quiz[i].correct);
    for (var j = 0; j < quiz[i].choices.length; j++) {
        quiz[i].choices[j] = escapeHtmlChars(quiz[i].choices[j]);
    }
}