从新的纯 HTML 文档开始,仅使用 HTML 和 Javascript。
在其上放置超链接词“食物”
点击“食物”后,应替换为“肉类和蔬菜”
点击“肉”后,应将其替换为“培根 pig 肉”
点击“蔬菜”后,应将其替换为“胡萝卜加豌 bean ”
点击“ pig 肉”后,应将其替换为“坚韧耐嚼”
点击“艰难”后,应替换为“烧焦和咸”
(等等)
我一直在尽力做到这一点,但我遇到了转义码问题。
这是我的代码:
<span id="food"><a href="#" onclick="document.getElementById('food').innerHTML='<span id=\'meat\'><a href=\'#\' onclick=\'var meat = "<span id=&pork&><a href=#\ onclick=alert(2)>pork</a></span> with bacon"; document.getElementById("meat").innerHTML = meat\'>meat</a></span> and <span id=\'vegetables\'><a href=\'#\' onclick=\'var vegetables = "carrots plus peas"; document.getElementById("vegetables").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>
关于javascript - JS : Replace a link with another word. 嵌套引号 + 转义码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25985650/