可定制的字母替换器

问题描述

我一直在开发一款几乎取代字母的应用程序。
所以你会有一个字母和一个输入框。这封信代表了将被替换的字母，并在输入框中写下您想要替换的内容。为此，我使用了正则表达式和对象。

I've been working on an app that pretty much replaces letters.So you'll have a letter and an input box. The letter reprecents what letter will be replaced, and you write what you want it to be replaced with in the input box. For this I used regex and objects.

如果你喜欢 @anonymous ，那究竟是什么问题：

If you wander like @anonymous, what exactly is wrong:

以下是答案：

问题是，如果您想用用户选择的任何内容替换用户选择的内容该怎么办？

下面的代码包括简化的内容，并且也是整体简化的。我添加了CSS以创建某种顺序。

The code below includes coment to simplify, and is also overall simplified. I added the CSS in order to create some sort of order.

为了让您知道我在说什么，这里是链接。

To give you an idea of what I'm talking about, here is the link http://codepen.io/julian-a-avar/debug/BywZYL.

或者您可以随时在此处查看：

Or you can always view it here:

// 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>

推荐答案

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

When you declare your customizing properties, you're passing them a property name, thinking they'll be the same value as the variables that are named the same way. This can't be done inside of object declarations, since the property names will be taken as strings. You have to set them outside of the object, with square bracket notation.

然而， 在ECMAScript 6 中，您/将能够将它们设置在对象内部，如下所示：

However, in ECMAScript 6, you're/will be able to set them inside of the object, like this:

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

目前仅支持Firefox和Safari

此外，翻译的函数名称似乎在Chrome中引发错误，不知道为什么，也许它是为其他内容保留的？我将其名称更改为 trans 。

Also, the function name of translate seems to throw an error in Chrome, not sure why, perhaps it is reserved for something else? I changed its name to 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);
}

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="trans()">
  <textarea id="output" readonly></textarea>
</div>

这篇关于可定制的字母替换器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！