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>