1

在 HTML 中嵌入要点很容易，只需包含下面的代码，浏览器就会在页面加载时获取资源。

<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。

4

1 回答 1

2

代码似乎很好。这是我的工作示例：

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函数的人对此有一些想法。

于 2014-01-30T17:07:58.233 回答