Question

在HTML中嵌入gist非常简单，只需包含以下代码，浏览器将在页面加载时获取资源。

<script src="https://gist.github.com/Xeoncross/eec39effbe6b9c421fec.js"></script>

但是，我正在尝试解析寻找短代码的页面，并用脚本标记替换这些文本节点。

[gist:eec39effbe6b9c421fec]

不幸的是，它似乎没有被解雇。

function loadGist(element, gistId) {
    var callbackName = "gist_callback";
    window[callbackName] = function (gistData) {
        console.log('Made it!');
        delete window[callbackName];
        var html = '<link rel="stylesheet" href="' + gistData.stylesheet + '"></link>';
        html += gistData.div;

        console.log(element.innerHTML);

        element.innerHTML = html;
        script.parentNode.removeChild(script);

        //element.parentNode.insertBefore(element, node);
        //node.parentNode.removeChild(node);

    };

    var script = document.createElement("script");
    script.setAttribute("src", "https://gist.github.com/" + gistId + ".json?callback=" + callbackName);
    document.body.appendChild(script);
    //return script;
}

function traverseChildNodes(node) {

    var next;

    if (node.nodeType === 1) {

        // (Element node)

        if (node = node.firstChild) {
            do {
                // Recursively call traverseChildNodes
                // on each child node
                next = node.nextSibling;
                traverseChildNodes(node);
            } while(node = next);
        }

    } else if (node.nodeType === 3) {

        // (Text node)

        if (/\[(\w+):([^\]]+)\]/g.test(node.data)) {
            // Do something interesting here
            console.log('found it', node);

            //<script src=""></script>

            var script = document.createElement("script");
            script.setAttribute("src", "https://gist.github.com/Xeoncross/eec39effbe6b9c421fec.js");
            //document.body.appendChild(script);

            var script = loadGist(node, 'eec39effbe6b9c421fec');

            /*
            var parent = node.parentNode;
            console.log(parent);
            parent.insertBefore(script, node);
            parent.removeChild(node);
            */

            //node.parentNode.insertBefore(script, node);
            //node.parentNode.removeChild(node);

        }

    }

}


var $body = document.getElementsByTagName("body")[0];

traverseChildNodes($body);

哦，我正在用香草Javascript做这一切 - 请不要jQuery。

Answer 1

代码似乎正在解雇。这是我的工作示例：

gistexample.html

<!DOCTYPE html>
<html>
<head>
  <title>Gist Shortcode Replacement</title>
</head>
<body>
<main>
<h1>Gist Shortcode Replacement</h1>
<p>lorem ipsum</p>
<p>some text [gist:eec39effbe6b9c421fec] more text</p>
</main>
<script src="loadgists.js" type="text/javascript"></script>
</body>
</html>

loadgists.js

function loadGist(element, gistId) {
    var callbackName = "gist_callback";
    window[callbackName] = function (gistData) {
        console.log('Made it!');
        delete window[callbackName];
        var html = '<link rel="stylesheet" href="' + gistData.stylesheet + '"></link>';
        html += gistData.div;

        var gistContainer = document.createElement('div');
        gistContainer.innerHTML = html;
        element.parentNode.appendChild(gistContainer);

        // console.log(element.innerHTML);
        // element.innerHTML = html;
    };

    var script = document.createElement("script");
    script.setAttribute("src", "https://gist.github.com/" + gistId + ".json?callback=" + callbackName);
    document.body.appendChild(script);
}

function traverseChildNodes(node) {
    var next;

    if (node.nodeType === 1) {
        if (node = node.firstChild) {
            do {
                // Recursively call traverseChildNodes
                // on each child node
                next = node.nextSibling;
                traverseChildNodes(node);
            } while(node = next);
        }

    } else if (node.nodeType === 3) {
        if (/\[(\w+):([^\]]+)\]/g.test(node.data))
            var script = loadGist(node, 'eec39effbe6b9c421fec');
    }
}

var $body = document.getElementsByTagName("body")[0];
traverseChildNodes($body);

思想

我唯一调整过的就是将要点插入DOM中。要实际替换短代码同时保持周围的文本完好无损将会有点棘手（特别是只使用vanilla JS）。虽然写了traverseChildNodes函数has some thoughts on this的人。

我想用github gists替换DOM文本节点

1 个答案:

gistexample.html

loadgists.js

思想