如何处理模板字符串中的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

传送门:html 标签转译反转译，http://www.cnblogs.com/xiansh...

Answer 2

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

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 3

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

const filterHTMLTag =(msg) => {
    let msg = msg.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
    msg = msg.replace(/[|]*\n/, '') //去除行尾空格
    msg = msg.replace(/&npsp;/ig, ''); //去掉npsp
    return msg;
}

代码来自度娘 -，-

Answer 4

你说的这个input标签满足不了你，你去找富文本js插件吧，像百度ueditor

Answer 5

去找富文本插件