javascript - JS : Replace a link with another word. 嵌套引号 + 转义码

Question

从新的纯 HTML 文档开始，仅使用 HTML 和 Javascript。

在其上放置超链接词“食物”

点击“食物”后，应替换为“肉类和蔬菜”

点击“肉”后，应将其替换为“培根 pig 肉”

点击“蔬菜”后，应将其替换为“胡萝卜加豌 bean ”

点击“ pig 肉”后，应将其替换为“坚韧耐嚼”

点击“艰难”后，应替换为“烧焦和咸”

(等等)

我一直在尽力做到这一点，但我遇到了转义码问题。

这是我的代码:

<span id="food"><a href="#" onclick="document.getElementById('food').innerHTML='<span id=\'meat\'><a href=\'#\' onclick=\'var meat = &#34;<span id=&#38;pork&#38;><a href=#\ onclick=alert(2)>pork</a></span> with bacon&#34;; document.getElementById(&#34;meat&#34;).innerHTML = meat\'>meat</a></span> and <span id=\'vegetables\'><a href=\'#\' onclick=\'var vegetables = &#34;carrots plus peas&#34;; document.getElementById(&#34;vegetables&#34;).innerHTML = vegetables\'>vegetables</a></span>'">food</a></span>

这是在行动:http://jsfiddle.net/jshflynn/L6r5rrfx/

很抱歉，它没有间隔，但这引发了错误。

请注意，“alert(2)”周围没有分隔字符，我不知道如何让它显示为“alert(''Hello'')”。

我觉得必须有某种递归方法来做到这一点，但我不确定。

提前致谢。尤其是如果你能完成完整的问题的话。

Answer 1

在这里，您明白了:http://jsfiddle.net/8bhd8njh/

    function bind(obj, evt, fnc) {
        // W3C model
        if (obj.addEventListener) {
            obj.addEventListener(evt, fnc, !1);
            return !0;
        }
        // Microsoft model
        else if (obj.attachEvent) {
            return obj.attachEvent('on' + evt, fnc);
        }
        // Browser don't support W3C or MSFT model, go on with traditional
        else {
            evt = 'on'+evt;
            if(typeof obj[evt] === 'function'){
                // Object already has a function on traditional
                // Let's wrap it with our own function inside another function
                fnc = (function(f1,f2){
                    return function(){
                        f1.apply(this,arguments);
                        f2.apply(this,arguments);
                    }
                })(obj[evt], fnc);
            }
            obj[evt] = fnc;
            return !0;
        }
    }

    String.prototype.supplant = function (a, b) {
        return this.replace(/{([^{}]*)}/g, function (c, d) {
            return void 0!=a[d]?a[d]:b?'':c
        })
    };

    var data = {
        food : '{meat} and {vegetables}',
        meat : '{pork} and {beef}',
        pork : '{tough} and {chewy}',
        tough : '{burnt} and {salty}',
        vegetables : '{carrots} and {peas}'
    };

    var classname = 'game-clickable';

    var init = function(obj, data) {
        var template = '<span class="{classname}">{text}</span>';

        obj.innerHTML = obj.innerHTML.replace(/{([^{}]*)}/g, function(a,b) {
            return template.supplant({
                classname : data[b] ? classname : '',
                text : b
            }, !0)
        });

        var objects = document.getElementsByClassName('game-clickable');

        for (var i = 0; i < objects.length; i++) {
            bind(objects[i], 'click', (function(o) {
                return function() {
                    if (!data[o.innerHTML]) {
                        return;
                    }
                    var parent = o.parentNode;

                    var span = document.createElement('SPAN');
                    span.innerHTML = data[o.innerHTML];

                    parent.insertBefore(span, o);
                    parent.removeChild(o);

                    init(parent, data);
                }
            })(objects[i]));
        }
    };

    init(document.getElementById('word-game'), data);

.game-clickable {
    cursor: pointer;
    text-decoration: underline;
}

<div id="word-game">
    {food}
</div>