如何处理模板字符串中的html标签

Question

页面中有个input输入框，如果对方输入<h2>你好</h2>,那么会自动转变成大号粗体的文字。如何达到p.content中直接输出字符串，h2标签不解析成大号粗体？var value = document.getElementById('input').value;template = `<p class="content">${value}</p>`;上述代码会将HTML标签解析成默认的样式，模板字符串中如何达到和textContent或者innerText一样的效果？

Answer 1

把字符串中标签的开始和结尾转义以下就好了：

function htmlEscape(text) {

    return text.replace(/[<>"&]/g, function(match, pos, originalText){

        switch(match) {

            case "<": {

                return "&lt";

            }

            case ">": {

                return "&gt";

            }

            case "&": {

                return "&amp";

            }

            case "\"": {

                return "&quot;";

            }

        }

    });

}

这些函数还是经常用到的，可以创建一个自己的代码仓库，把常用的函数存起来。

Answer 2

仅仅是消除标签的样式的话，把标签过滤就行了吧，还用不上富文本插件：

const filterHTMLTag =(msg) => {

    let msg = msg.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag

    msg = msg.replace(/[|]*\n/, '') //去除行尾空格

    msg = msg.replace(/&npsp;/ig, ''); //去掉npsp

    return msg;

}

代码来自度娘 -，-