html字符串转义与反转义

最新推荐文章于 2024-05-20 15:31:49 发布

2422400672

最新推荐文章于 2024-05-20 15:31:49 发布

阅读量1.3k

点赞数

分类专栏：前端 javascript

本文链接：https://blog.csdn.net/qq_36154659/article/details/125354018

版权

html javascript elementui

前端同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

javascript

23 篇文章 0 订阅

订阅专栏

html字符串转义与反转义

html字符串转义

方法一

    const htmlStr = `<div id="root" class="root">
    <div class="cls-1">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="cls-2">
        <ol>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <div class="cls-3">
        <div class="cls-3-1"></div>
        <div class="cls-3-2"></div>
        <div class="cls-3-3"></div>
    </div>
</div>`;

    const escapeHtml = function (str) {
        if (Object.prototype.toString.call(str) !== '[object String]') {
            return '';
        }
        return str.replace(/<|&|>/g, function (match) {
            return ({
                '<': '&lt;',
                '>': '&gt;',
                '&': '&amp;'
            })[match];
        });
    };
    console.log(escapeHtml(htmlStr))

方法二

    const htmlStr = `<div id="root" class="root">
    <div class="cls-1">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="cls-2">
        <ol>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <div class="cls-3">
        <div class="cls-3-1"></div>
        <div class="cls-3-2"></div>
        <div class="cls-3-3"></div>
    </div>
</div>`;

    const escapeHtml = function (str) {
        let textNode = document.createTextNode(str);
        let div = document.createElement('div');
        div.append(textNode);
        return div.innerHTML;
    };
    console.log(escapeHtml(htmlStr))

html字符串反转义

    const htmlStr = `&lt;div id="root" class="root"&gt;
    &lt;div class="cls-1"&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="cls-2"&gt;
        &lt;ol&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
        &lt;/ol&gt;
    &lt;/div&gt;
    &lt;div class="cls-3"&gt;
        &lt;div class="cls-3-1"&gt;&lt;/div&gt;
        &lt;div class="cls-3-2"&gt;&lt;/div&gt;
        &lt;div class="cls-3-3"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;`;

    const unescapeHtml = function (str) {
        if (Object.prototype.toString.call(str) !== '[object String]') {
            return '';
        }
        return str.replace(/&lt;|&gt;|&amp;/g, function (match) {
            return ({
                '&lt;': '<',
                '&gt;': '>',
                '&amp;': '&'
            })[match];
        });
    };
    console.log(unescapeHtml(htmlStr))