JS：用另一个词代替链接。 嵌套引号+换码

Question

从一个全新的纯HTML文档开始，并且仅使用HTML和Javascript。

在其上放置超链接的单词“食品”

单击“食物”后，应将其替换为“肉和蔬菜”

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

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

单击“猪肉”后，应将其替换为“坚韧而耐嚼”

单击“坚韧”后，应将其替换为“烧焦和咸味”

（等等）

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

这是我的代码：

<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

我认为您正在寻找类似以下内容的东西：

 var replacements = { "food" : "meat and vegetables", "meat" : "pork with bacon", "vegetables" : "carrots plus peas", "pork" : "tough and chewy", "tough" : "burnt and salty" }; function replaceAnchor(a) { var elementType = ""; var lastElementType = ""; var target = a.innerHTML; var replacement = replacements[target]; var words = replacement.split(' '); var newElement = {}; for(var i = 0; i < words.length; i++) { var word = words[i]; if (replacements[word]) { elementType = "a"; } else { elementType = "span"; } if (elementType === "a" || elementType != lastElementType) { newElement = document.createElement(elementType); if (elementType === "a") { newElement.onclick = function(e) { replaceAnchor(this); e.preventDefault(); }; } a.parentNode.insertBefore(newElement, a); } if (elementType == "span") { newElement.innerHTML = newElement.innerHTML + " " + word + " "; } else { newElement.innerHTML += word; } lastElementType = elementType; } a.parentElement.removeChild(a); return false; } 

 a { text-decoration : underline; color : blue; cursor: pointer; } 

 <a onclick="return replaceAnchor(this);">food</a> 

Answer 2

在这里，您有了主意： 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>