javascript - 如何使用textarea插入html和javascript代码

Question

我想在我的数据库中插入带有 textarea 字段的 html 和 JavaScript 代码。问题是代码已插入，但它用反冲替换了所有双重问题。如何使用文本区域插入此代码。

<div id="TA_cdsratingsonlynarrow539" class="TA_cdsratingsonlynarrow"><ul id="Ny62NY" class="TA_links r04zlbt"><li id="jb9xdEapRG" class="sc9nmfeVX"><a target="_blank" href="https://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"/></a></li></ul></div><script src="https://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&amp;uniq=539&amp;locationId=671932&amp;lang=en_US&amp;border=false&amp;shadow=false&amp;display_version=2"></script>

Answer 1

可以使用文本区域输入字段将 html 和 javascript 代码插入/注入(inject)到当前页面。

考虑一下，您已经关注了文本区域:

<div id="output"></div>
<div style="margin: 25px auto; width: 80%; height: auto;">
    <form id="myform" name="myform">
        <textarea id="mytextarea" name="mytextarea" cols="90" rows="20"></textarea>
        <br> <button type="button" id="mybutton">execute</button>
    </form>
</div>

现在，您可以向上面的按钮添加事件监听器，以从文本区域提取 html 和 javascript 代码并将它们插入到页面中:

    window.addEventListener('load', function () {
        document.getElementById('mybutton').addEventListener('click', function (e) {
            var mytextarea = document.getElementById('mytextarea');
            var pattern = /<script>([^]+?)<\/script>/mg;
            var matches, txt = mytextarea.value;
            if (txt) {
                while (matches = pattern.exec(txt)) {
                    if (matches[1]) {
                        var tContent = matches[1].replace(/(\n|\r)+/gm, '');
                        var s = document.createElement('script');
                        s.innerText = tContent;
                        document.body.appendChild(s);
                    }
                }
                txt = txt.replace(pattern, '');
            }
            if (txt) {
                document.getElementById('output').innerHTML = txt;
            }
        });
    });