Javascript 可定制字母替换器

我一直在开发一个几乎可以替代字母的应用程序。 所以你会有一个字母和一个输入框。该字母表示将替换的字母，您在输入框中写入希望替换的字母。为此，我使用了正则表达式和对象

如果你像@anonymous一样四处游荡，到底出了什么问题：

---

@朱利安娜娃：什么不管用？您遇到的具体问题是什么？-匿名的

答案如下：

@匿名#额外定制不起作用。假设您决定将额外定制替换为：a替换为b，b替换为c，c替换为d。不要改变任何其他东西。现在键入“abcd”并单击“翻译”，您将看到#额外自定义不会覆盖#自定义–julian avar

问题是，如果要将用户选择的内容替换为用户选择的内容，该怎么办

下面的代码包括coment to simplify，并且是整体简化的。我添加CSS是为了创建某种顺序

为了让你了解我在说什么，这里是链接

或者您也可以在此处查看：

//我的全局
var输出=$（“#输出”）；
var额外定制=$（“#额外定制”）；
String.prototype.cap=函数（）{//需要或演示
返回this.charAt（0.toUpperCase（）+this.slice（1）；
}
函数translate（）{
var输入=$（“#输入”）；
var value=input.val（）；
//检索#定制
/*
我检索输入框的值，以便以后替换它们
*/
//需要或示范
var IDa=$（“#a”）.val（）；
var IDb=$（“#b”）.val（）；
var IDc=$（“#c”）.val（）；
var IDd=$（“#d”）.val（）；
//检索#额外定制
/*
使用与其他逻辑相同的逻辑
*/
var ID_ax=$（“#ax”）.val（）；//输入
var ID_ay=$（“#ay”）.val（）；//输出
var ID_bx=$（“#bx”）.val（）；//输入
var ID_by=$（“#by”）.val（）；//输出
var ID_cx=$（“#cx”）.val（）；//输入
var ID_cy=$（“#cy”）.val（）；//输出
/*
如果用户输入了要替换的内容，他们必须有要替换的内容（以后可能会更改）
*/
如果（ID\u ax！=“”&ID\u ax=“”）{
警报（“您尚未在#1）中输入值”）；
}
如果（ID\u bx！=“”&ID\u bx=“”）{
警告（“您没有在#2中输入值”）；
}
如果（ID\u cx！=“”&ID\u cx=“”）{
警告（“您没有在#3中输入值”）；
}
//背景
var mapObj={
//设置#自定义
/*
我首先选择用户要写的内容，以及应该用什么替换它
*/
a:艾达，
b:IDb，
c:IDc，
d:国际直拨电话，
A:IDa.cap（），
B:IDb.cap（），
C:IDc.cap（），
D:IDd.cap（），
//设置#额外定制
/*
我试图用同样的逻辑，但没有成功
*/
ID_-ay:ID_-ax，
ID_by:ID_bx，
ID\u cy:ID\u cx
}; 
//翻译
/*
下面是用于替换字母的代码
*/
var re=新
RegExp（Object.keys（mapObj.join）（“|”）g）；
值=值。替换（re），功能（匹配）{
返回mapObj[matched]；
});
输出.val（值）；
}

正文{
背景色：#中交；
颜色：#4444；
}
人力资源{
宽度：60%；
背景色：#999999；
边界：无；
填充：0；
边距：0自动0自动；
}
#定制{
字体系列：“信使”；
宽度：计算（50em+195px）；
宽度：-moz计算（50em+195px）；
保证金：自动；
字体大小：.8em；
}
#额外定制{
字体系列：“信使”；
宽度：计算（55em+282px）；
宽度：-moz计算（55em+282px）；
保证金：自动；
字体大小：.8em；
边缘顶部：.5em；
填料顶部：.5em；
左侧填充：.5em；
右侧填充：.5em；
边界半径：2px；
}
#自定义输入，#额外自定义输入{
字体系列：“信使”；
宽度：3em；
左边距：5px；
右边距：10px；
字体系列：“信使”；
文本对齐：居中；
字体大小：.8em；
垫底：3em；
填料顶部：2米；
背景色：#111111；
颜色：#AAAAA；
边界：无；
边界半径：2px；
边缘底部：1米；
}
#额外定制输入{
右边距：15px；
}
#翻译器{
宽度：100%；
}
#额外定制{
宽度：320px；
保证金：.2em自动1em自动；
}
#额外自定义输入{
边界：无；
填充：0；
保证金：0；
宽度：1米；
高度：.9em；
}
#输入{
宽度：40%；
高度：40vh；
浮动：左；
填充：.43%；
保证金：0；
左缘：5%；
边界：无；
背景色：#111111；
颜色：#AAAAA；
边界半径：2px；
字号：1em；
大纲：无；
调整大小：无；
溢出：自动；
}
#输入{
字体系列：“信使”；
宽度：8.28%；
填充：0；
保证金：0；
垫面：3件；
垫底：3件；
边界：无；
背景色：#1F；
颜色：#AAAAA；
边界半径：2px；
字体大小：.8em；
调整大小：无；
光标：指针；
大纲：无；
}
#输入b：悬停{
背景色：#AAAAA；
颜色：#1F；
}
#输出{
宽度：40%；
高度：40vh；
浮动：对；
填充：.43%；
保证金：0；
保证金权利：5%；
边界：无；
背景色：#111111；
颜色：#AAAAA；
边界半径：2px；
字号：1em；
大纲：无；
调整大小：无；
溢出：自动；
}

A.
B
C
D

1:
2:
三：

当您声明自定义属性时，您正在向它们传递一个属性名称，认为它们将与以相同方式命名的变量具有相同的值。这不能在对象声明内部完成，因为属性名将被视为字符串。必须使用方括号表示法将它们设置在对象外部

然而，像这样：

var prop = "foo";
var o = {
  [prop]: "hey",
  ["b" + "ar"]: "there"
};

目前只支持Firefox和Safari

另外，

translate

的函数名似乎在Chrome中抛出了一个错误，不知道为什么，也许它是为其他东西保留的？我把它的名字改成了

trans

看一看：

//我的全局
var输出=$（“#输出”）；
var额外定制=$（“#额外定制i