文章/答案/技术大牛

发布

社区首页 >问答首页 >字母替换一个字符故障

问字母替换一个字符故障
EN

Stack Overflow用户

提问于 2015-06-12 18:45:29

回答 1查看 50关注 0票数 0

这是对以下问题的延续：customizable letter replacer

我有一个代码将取代字母，你可以键入任何你想要的某封信。例如，如果要将“l”替换为“u”，则输入"hello“，输出为"heuuo”。

当我希望用户能够选择用任何字符串替换的任何字符串时，问题就会出现。例如，如果用户想要将“小鸡”替换为“块”。

问题是，我只能选择包含一个字母的字符串。我不能像上面的例子(鸡块)那样做，但是我可以用我想要的任意数量的字符替换任何一个字符。

请解释一下正在发生的事情，不要只给我密码，谢谢！

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

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

javascript

regex

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-06-12 19:38:42

如果在"1“右边的框中输入”鸡肉“和”nugget“，则会得到以下正则表达式：

/a|b|c|d|A|B|C|D|chicken|/g

因此，它将试图匹配任何包含a，b，c，d，A，B，C，D或鸡的东西。

因为在正则表达式的列表中，c位于鸡肉之前，而鸡肉以c开头，所以这个词永远不会匹配。

您应该做的是将单词放在正则表达式中的字母前面。你可以这样做：

var re = new RegExp(
  Object.keys(mapObj)
    .sort(function(a, b) {
      return b.length - a.length;
    })
    .join("|"),
  "g"
);

sort函数更改键的顺序，以便将最长的单词放在第一位。

然后，正则表达式将变成：

/chicken|a|b|c|d|A|B|C|D|/g

片段

// 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)
        .sort(function(a, b) {
          return b.length - a.length;
        })
        .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;
}

</div><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="7">:<input type="text" id="Ay" value="" maxlength="7">
  2<input type="text" id="Bx" value="" maxlength="7">:<input type="text" id="By" value="" maxlength="7">
  3<input type="text" id="Cx" value="" maxlength="7">:<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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30810155

复制

相似问题

问字母替换一个字符故障
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问字母替换一个字符故障EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问字母替换一个字符故障
EN