Question

我想进行测验，但显示HTML符号有问题。例如，显示“ "而不是“ 这是完整的代码：https://codepen.io/mixereq/pen/GVdoWV

const result = JSON.parse(xhr.response);
for(let i=0; i<result.results.length; i++) {
    let categoryElement = document.createElement('div');
    let questionElement = document.createElement('div');
    let answersElement = document.createElement('div');

    categoryElement.className = 'category';
    questionElement.className = 'question';
    answersElement.className = 'answers';

    categoryElement.innerText = result.results[i].category;
    questionElement.innerText = result.results[i].question;
    if(result.results[i].correct_answer == 'True') {
        answersElement.innerText = result.results[i].correct_answer + result.results[i].incorrect_answers[0];
    } else {
        answersElement.innerText = result.results[i].incorrect_answers[0] + result.results[i].correct_answer;
    }

    container.appendChild(categoryElement);
    container.appendChild(questionElement);
    container.appendChild(answersElement);
}

Answer 1

使用innerHTML而不是innerText来设置您的内容。然后，浏览器会将值解释为HTML而不是纯文本，并将解析并呈现它，而不仅仅是逐字显示。

当然，当显示来自第三方API的HTML时，应谨慎使用-注意脚本注入之类的风险。

Answer 2

使用innerHTML代替innerText：

const result = JSON.parse(xhr.response);
for(let i=0; i<result.results.length; i++) {
    let categoryElement = document.createElement('div');
    let questionElement = document.createElement('div');
    let answersElement = document.createElement('div');

    categoryElement.className = 'category';
    questionElement.className = 'question';
    answersElement.className = 'answers';

    categoryElement.innerHTML = result.results[i].category;
    questionElement.innerHTML = result.results[i].question;
    if(result.results[i].correct_answer == 'True') {
        answersElement.innerHTML = result.results[i].correct_answer + result.results[i].incorrect_answers[0];
    } else {
        answersElement.innerHTML = result.results[i].incorrect_answers[0] + result.results[i].correct_answer;
    }

    container.appendChild(categoryElement);
    container.appendChild(questionElement);
    container.appendChild(answersElement);
 }

更多信息：Difference between innerText and innerHTML

Answer 3

尝试将 innerText 更改为 innerHTML 。

innerText 只是将纯文本忽略特殊字符。

categoryElement.innerText = result.results[i].category;

为

categoryElement.innerHTML = result.results[i].category;

Answer 4

您从后端得到的答案是错误的-包含不需要的“。解决此问题的肮脏方法已由正则表达式取代。

questionElement.innerText = result.results[i].question.replace(/&quot;/g, '"');

如何修复显示HTML符号

4 个答案: