html字符串转义与反转义_qt html反转义

作者：我家自动化 | 2024-02-16 11:55:15

踩

qt html反转义

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))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

方法二

    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))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/92930