如何在界面正确显示带<>标签的字符串 拼接时标签不显示怎么办

问题原因 #

你遇到的是HTML内容解析的默认规则问题：浏览器在解析DOM的HTML内容时，会将所有<开头、>结尾的内容识别为HTML标签，不符合HTML规范的自定义标签会被自动过滤，因此<AGE>这类内容不会显示在页面上，和字符串拼接语法无关。你之前用的escape是URL编码函数，不适用于HTML场景，因此会出现%3CAGE%3E这类异常编码内容。

解决方案 #

方案1：手动实现HTML实体转义（适配字符串拼接场景） #

先实现一个通用的HTML转义函数，自动将字符串中的特殊字符转为浏览器可以识别的实体字符，无需手动修改原始内容：

function htmlEncode(str) {
  return str.replace(/[&<>"']/g, function(m) {
    return {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    }[m]
  })
}

调用时只需要将需要原样显示的内容传入函数即可：

success: function (response) {
    var tbody = "";
    $.each(response.all_legends, function (key, legend) {
        tbody += '<tr>'+
                    // 直接传入原始内容，无需手动替换<AGE>
                    '<td>' + htmlEncode('<AGE>') + '</td>'+
                    '<td>' + htmlEncode(legend.text) + '</td>'+
                '</tr>';
        });
    $('#legend-list tbody').html(tbody)
}

你之前的链接写法修改后如下：

'<td><a href="" onclick="appendMessageText(this)" class="blue-1">'+ htmlEncode(legend.value) +'</a></td>'+

方案2：用jQuery原生text()方法赋值（更稳妥，无需手动转义） #

如果不希望手动维护转义逻辑，可以直接用jQuery的text()方法给DOM赋值，该方法会自动将所有内容作为纯文本处理，不会被解析为HTML标签：

success: function (response) {
    const $tbody = $('#legend-list tbody').empty();
    $.each(response.all_legends, function (key, legend) {
        const $tr = $('<tr>');
        // text方法自动处理转义，<AGE>会原样显示
        $('<td>').text('<AGE>').appendTo($tr);
        $('<td>').text(legend.text).appendTo($tr);
        $tr.appendTo($tbody);
    })
}

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