JS:用另一个单词替换链接.嵌套引号+转义码

JS: Replace a link with another word. Nested quotes + escape codes

本文关键字：转义嵌套链接另一个单词替换 JS 更新时间：2023-09-26

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

在上面放置超链接单词"food"

点击"食物"后，应将其替换为"食物和蔬菜"

点击"吃"后，应将其替换为"培根工作"

点击"蔬菜"后，应将其替换为"胡萝卜加豌豆"

点击"工作"后，应将其替换为"粗糙且有嚼劲"的

单击"浏览"后，应将其替换为"焦咸"

（等等）

我一直在尽力做到这一点，但我遇到了逃避现实的问题。

这是我的代码：

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

我觉得一定有一些递归的方法可以做到这一点，但我不确定。

提前谢谢。尤其是如果你能解决全部问题。

给你，你得到了这个想法：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>

我认为您正在寻找以下内容：

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>