我一直在开发一款几乎取代字母的应用程序。 所以你会有一个字母和一个输入框。这封信代表了将被替换的字母,并在输入框中写下您想要替换的内容。为此,我使用了正则表达式和对象。
如果你喜欢 @anonymous ,那究竟是什么错误:
@julianavar什么不起作用?你遇到的具体问题是什么? - 匿名
以下是答案:
@Anonymous#extra-customizing不起作用。我们只是说你决定替换#extra-customizing以下:a用b,b用c,c用d。不要改变任何其他东西。现在输入“abcd”点击翻译,你会看到#extra-customizing不会覆盖#customizing - julian avar
问题是,如果您想用用户选择的任何内容替换用户选择的内容,该怎么办?
下面的代码包括简化的内容,也是整体简化的代码。我添加了CSS以创建某种顺序。
为了让您知道我在说什么,这里是链接http://codepen.io/julian-a-avar/debug/BywZYL。
或者您可以随时在此处查看:
// My globals
var output = $("#output");
var extra_customizing = $("#extra-customizing");
String.prototype.cap = function() { // needed or demonstration
return this.charAt(0).toUpperCase() + this.slice(1);
}
function translate() {
var input = $("#input");
var value = input.val();
// Retriving #customizing
/*
I retrieve the values of the input boxes, in order to replace them later
*/
// needed or demonstration
var IDa = $("#a").val();
var IDb = $("#b").val();
var IDc = $("#c").val();
var IDd = $("#d").val();
// Retriving #extra-customizing
/*
Using the same logic as the other ones
*/
var ID_ax = $("#Ax").val(); // input
var ID_ay = $("#Ay").val(); // output
var ID_bx = $("#Bx").val(); // input
var ID_by = $("#By").val(); // output
var ID_cx = $("#Cx").val(); // input
var ID_cy = $("#Cy").val(); // output
/*
If the user inputs something to replace, they MUST have something to to replace it with(may change later)
*/
if(ID_ax != "" && ID_ax == "") {
alert("You have not insterted a value in #1");
}
if(ID_bx != "" && ID_bx == "") {
alert("You have not insterted a value in #2");
}
if(ID_cx != "" && ID_cx == "") {
alert("You have not insterted a value in #3");
}
// Setting
var mapObj = {
// Setting #customizing
/*
I first select what the user would write, and the what it should be replaced with
*/
a: IDa,
b: IDb,
c: IDc,
d: IDd,
A: IDa.cap(),
B: IDb.cap(),
C: IDc.cap(),
D: IDd.cap(),
// Setting #extra-customizing
/*
I'm trying to use the same logic, but it is unsuccesful
*/
ID_ay: ID_ax,
ID_by: ID_bx,
ID_cy: ID_cx
};
// Translating
/*
Below is the code used to replace letters
*/
var re = new
RegExp(Object.keys(mapObj).join("|"),"g");
value = value.replace(re, function(matched) {
return mapObj[matched];
});
output.val(value);
}
body {
background-color: #cccccc;
color: #444444;
}
hr {
width: 60%;
background-color: #999999;
border: none;
padding: 0;
margin: 0 auto 0 auto;
}
#customizing {
font-family: "courier";
width: calc(50em + 195px);
width: -moz-calc(50em + 195px);
margin: auto;
font-size: .8em;
}
#extra-customizing {
font-family: "courier";
width: calc(55em + 282px);
width: -moz-calc(55em + 282px);
margin: auto;
font-size: .8em;
margin-top: .5em;
padding-top: .5em;
padding-left: .5em;
padding-right: .5em;
border-radius: 2px;
}
#customizing input, #extra-customizing input {
font-family: "courier";
width: 3em;
margin-left: 5px;
margin-right: 10px;
font-family: "courier";
text-align: center;
font-size: .8em;
padding-bottom: .3em;
padding-top: .2em;
background-color: #111111;
color: #aaaaaa;
border: none;
border-radius: 2px;
margin-bottom: 1em;
}
#extra-customizing input {
margin-right: 15px;
}
#translator {
width: 100%;
}
#extra-customize {
width: 320px;
margin: .2em auto 1em auto;
}
#extra-customize input {
border: none;
padding: 0;
margin: 0;
width: 1em;
height: .9em;
}
#input {
width: 40%;
height: 40vh;
float: left;
padding: .43%;
margin: 0;
margin-left: 5%;
border: none;
background-color: #111111;
color: #aaaaaa;
border-radius: 2px;
font-size: 1em;
outline: none;
resize: none;
overflow: auto;
}
#inputB {
font-family: "courier";
width: 8.28%;
padding: 0;
margin: 0;
padding-top: 3px;
padding-bottom: 3px;
border: none;
background-color: #1f1f1f;
color: #aaaaaa;
border-radius: 2px;
font-size: .8em;
resize: none;
cursor: pointer;
outline: none;
}
#inputB:hover {
background-color: #aaaaaa;
color: #1f1f1f;
}
#output {
width: 40%;
height: 40vh;
float: right;
padding: .43%;
margin: 0;
margin-right: 5%;
border: none;
background-color: #111111;
color: #aaaaaa;
border-radius: 2px;
font-size: 1em;
outline: none;
resize: none;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="customizing">
a<input type="text" id="a" value="a" maxlenght="3">
b<input type="text" id="b" value="b" maxlenght="3">
c<input type="text" id="c" value="c" maxlenght="3">
d<input type="text" id="d" value="d" maxlenght="3">
</div>
<hr>
<div id="extra-customizing">
1<input type="text" id="Ax" value="" maxlength="5">:<input type="text" id="Ay" value="" maxlength="7">
2<input type="text" id="Bx" value="" maxlength="5">:<input type="text" id="By" value="" maxlength="7">
3<input type="text" id="Cx" value="" maxlength="5">:<input type="text" id="Cy" value="" maxlength="7">
</div>
<div id="translator">
<textarea id="input"></textarea>
<input type="button" value="Translate" id="inputB" onclick="translate()">
<textarea id="output" readonly></textarea>
</div>
答案 0 :(得分:3)
当您声明自定义属性时,您将向它们传递属性名称,并认为它们与以相同方式命名的变量的值相同。这不能在对象声明中完成,因为属性名称将被视为字符串。您必须使用方括号表示法将它们设置在对象之外。
然而,in ECMAScript 6, you're/will be able to set them inside of the object,如下:
var prop = "foo";
var o = {
[prop]: "hey",
["b" + "ar"]: "there"
};
目前仅支持Firefox和Safari
此外,translate
的函数名称似乎在Chrome中引发错误,不确定原因,也许它是为其他内容保留的?我将其名称更改为trans
。
看一看:
http://jsfiddle.net/L2Lackjc/1/
// My globals
var output = $("#output");
var extra_customizing = $("#extra-customizing");
String.prototype.cap = function () { // needed or demonstration
return this.charAt(0).toUpperCase() + this.slice(1);
};
function trans() {
var input = $("#input");
var value = input.val();
// Retriving #customizing
/*
I retrieve the values of the input boxes, in order to replace them later
*/
// needed or demonstration
var IDa = $("#a").val();
var IDb = $("#b").val();
var IDc = $("#c").val();
var IDd = $("#d").val();
// Retriving #extra-customizing
/*
Using the same logic as the other ones
*/
var ID_ax = $("#Ax").val(); // input
var ID_ay = $("#Ay").val(); // output
var ID_bx = $("#Bx").val(); // input
var ID_by = $("#By").val(); // output
var ID_cx = $("#Cx").val(); // input
var ID_cy = $("#Cy").val(); // output
/*
If the user inputs something to replace, they MUST have something to to replace it with(may change later)
*/
if (ID_ax != "" && ID_ax == "") {
alert("You have not insterted a value in #1");
}
if (ID_bx != "" && ID_bx == "") {
alert("You have not insterted a value in #2");
}
if (ID_cx != "" && ID_cx == "") {
alert("You have not insterted a value in #3");
}
// Setting
var mapObj = {
// Setting #customizing
/*
I first select what the user would write, and the what it should be replaced with
*/
a: IDa,
b: IDb,
c: IDc,
d: IDd,
A: IDa.cap(),
B: IDb.cap(),
C: IDc.cap(),
D: IDd.cap()
};
// Extra customizing
mapObj[ID_ax] = ID_ay;
mapObj[ID_bx] = ID_by;
mapObj[ID_cx] = ID_cy;
// Translating
/*
Below is the code used to replace letters
*/
var re = new RegExp(Object.keys(mapObj).join("|"), "g");
console.log(re);
value = value.replace(re, function (matched) {
return mapObj[matched];
});
output.val(value);
}
&#13;
body {
background-color: #cccccc;
color: #444444;
}
hr {
width: 60%;
background-color: #999999;
border: none;
padding: 0;
margin: 0 auto 0 auto;
}
#customizing {
font-family: "courier";
width: calc(50em + 195px);
width: -moz-calc(50em + 195px);
margin: auto;
font-size: .8em;
}
#extra-customizing {
font-family: "courier";
width: calc(55em + 282px);
width: -moz-calc(55em + 282px);
margin: auto;
font-size: .8em;
margin-top: .5em;
padding-top: .5em;
padding-left: .5em;
padding-right: .5em;
border-radius: 2px;
}
#customizing input, #extra-customizing input {
font-family: "courier";
width: 3em;
margin-left: 5px;
margin-right: 10px;
font-family: "courier";
text-align: center;
font-size: .8em;
padding-bottom: .3em;
padding-top: .2em;
background-color: #111111;
color: #aaaaaa;
border: none;
border-radius: 2px;
margin-bottom: 1em;
}
#extra-customizing input {
margin-right: 15px;
}
#translator {
width: 100%;
}
#extra-customize {
width: 320px;
margin: .2em auto 1em auto;
}
#extra-customize input {
border: none;
padding: 0;
margin: 0;
width: 1em;
height: .9em;
}
#input {
width: 40%;
height: 40vh;
float: left;
padding: .43%;
margin: 0;
margin-left: 5%;
border: none;
background-color: #111111;
color: #aaaaaa;
border-radius: 2px;
font-size: 1em;
outline: none;
resize: none;
overflow: auto;
}
#inputB {
font-family: "courier";
width: 8.28%;
padding: 0;
margin: 0;
padding-top: 3px;
padding-bottom: 3px;
border: none;
background-color: #1f1f1f;
color: #aaaaaa;
border-radius: 2px;
font-size: .8em;
resize: none;
cursor: pointer;
outline: none;
}
#inputB:hover {
background-color: #aaaaaa;
color: #1f1f1f;
}
#output {
width: 40%;
height: 40vh;
float: right;
padding: .43%;
margin: 0;
margin-right: 5%;
border: none;
background-color: #111111;
color: #aaaaaa;
border-radius: 2px;
font-size: 1em;
outline: none;
resize: none;
overflow: auto;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="customizing">
a<input type="text" id="a" value="a" maxlenght="3">
b<input type="text" id="b" value="b" maxlenght="3">
c<input type="text" id="c" value="c" maxlenght="3">
d<input type="text" id="d" value="d" maxlenght="3">
</div>
<hr>
<div id="extra-customizing">
1<input type="text" id="Ax" value="" maxlength="5">:<input type="text" id="Ay" value="" maxlength="7">
2<input type="text" id="Bx" value="" maxlength="5">:<input type="text" id="By" value="" maxlength="7">
3<input type="text" id="Cx" value="" maxlength="5">:<input type="text" id="Cy" value="" maxlength="7">
</div>
<div id="translator">
<textarea id="input"></textarea>
<input type="button" value="Translate" id="inputB" onclick="trans()">
<textarea id="output" readonly></textarea>
</div>
&#13;