文本类型列message_template中含<>标签的内容UI不显示问题咨询

直接将包含<>符号的纯文本内容拼接进HTML字符串时，浏览器会将<>包裹的内容识别为HTML标签进行解析，非合法的HTML标签会被浏览器默认过滤不展示，因此你数据库中存储的原始纯文本内容到前端渲染时丢失了<>包裹的部分。

方案1：手动转义HTML特殊字符 #

先定义转义函数，将HTML特殊字符转换为浏览器不会识别为标签的转义字符：

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

修改渲染message_template的代码，转义后再拼接：

'<td>'+escapeHtml(message.message_template)+'</td>'+ 

方案2：使用jQuery的text()方法自动转义（更安全） #

避免手动拼接HTML字符串，创建DOM节点后用text()方法赋值，jQuery会自动处理所有转义逻辑，还能避免XSS漏洞，可将渲染逻辑调整为如下形式：

$.each(response.all_messages, function (key, message) {
    const $tr = $('<tr></tr>');
    $tr.append($('<td></td>').html(`<p class="font-weight-bold mb-0">${message.message_name}</p>${message.message_description}`));
    $tr.append($('<td></td>').text(message.message_type));
    // 关键：纯文本内容用text方法赋值，自动转义特殊字符
    $tr.append($('<td></td>').text(message.message_template));
    $tr.append($('<td></td>').html(getreplytype(message.reply, message.reply_type, message.reply_description)));
    $tr.append($('<td></td>').html(getmessagestatus(message.effective_start_datetime, message.effective_end_datetime)));
    const $opTd = $('<td></td>');
    $opTd.append($('<button type="button" class="edit_message btn btn-outline-secondary"></button>').val(message.id).html('<i class="fas fa-edit"></i> Edit'));
    $opTd.append($('<button type="button" class="delete_message btn btn-outline-secondary"></button>').val(message.message_id).html('<i class="fas fa-trash"></i> Delete'));
    $tr.append($opTd);
    tbody.append($tr);
});

内容的提问来源于stack exchange，提问作者user16409170