javascript - string replacer and json -
i'm working in app replace strings other strings inside string.
example: "nuggets" replaces "chicken" input = "i chicken";
output = "i nuggets";
for have textarea
input. user input json object this.
example: replacing_box_input = "{"a":"b","b":"c","c":"d","chicken":"nuggets"}";
input = "i chicken abc";
output = "i nuggets bcd";
here code using:
var output = $("#output"); string.prototype.cap = function () { return this.charat(0).touppercase() + this.slice(1); }; function trans() { var dic_editor = $("#dic-editor"); var value = dic_editor.val(); var mapobj = json.parse(value); var re = new regexp(object.keys(mapobj).sort(function(a, b) { return b.length - a.length; }).join("|"), "g"); value = value.replace(re, function (matched) { return mapobj[matched]; }); output.val(value); }
body { background-color: #cccccc; color: #444444; } h1 { text-align: center; font-family: "courier"; } #explanation { text-align: justify; font-family: "times new roman"; font-size: 1em; text-indent: 3em; } code { font-family: "courier new"; font-size: .8em; padding: 2px; padding-left: 4px; padding-right: 4px; background-color: #111111; color: #aaaaaa; border-radius: 2px; } #dic-editor { width: calc(100% - .86%); width: -moz-calc(100% - .86%); height: calc(100vh - 1.86em); height: -moz-calc(100vh - 1.86em); padding: .43%; margin: 0; margin-bottom: 1em; border: none; background-color: #111111; color: #aaaaaa; border-radius: 2px; font-size: 1em; outline: none; resize: none; overflow: auto; } #input { width: calc(43% - .86%); width: -moz-calc(43% - .86%); height: 40vh; float: left; padding: .43%; margin: 0; border: none; background-color: #111111; color: #aaaaaa; border-radius: 2px; font-size: 1em; outline: none; resize: none; overflow: auto; } #inputb { font-family: "courier"; width: 14%; 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: calc(43% - .86%); width: -moz-calc(43% - .86%); height: 40vh; float: right; padding: .43%; margin: 0; border: none; background-color: #111111; color: #aaaaaa; border-radius: 2px; font-size: 1em; outline: none; resize: none; overflow: auto; }
<!doctype html> <html lang="en-us"> <head> <title>conlango</title> </head> <body> <h1>conlang: generator</h1> <textarea id="dic-editor"></textarea> <div id="translator"> <textarea id="input"></textarea> <input type="button" value="translate" id="inputb" onclick="trans()"> <textarea id="output" readonly></textarea> </div> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </html>
the code not replacing should. need figuring out. of know why not replacing strings should?
here working example without being hooked user interface:
string.prototype.cap = function () { return this.charat(0).touppercase() + this.slice(1); }; function trans(value, jsonmap) { var mapobj = json.parse(jsonmap); var re = new regexp(object.keys(mapobj).sort(function(a, b) { return b.length - a.length; }).join("|"), "g"); return value.replace(re, function (matched) { return mapobj[matched]; }); } console.log(trans('i chicken abc', '{"a":"b","b":"c","c":"d","chicken":"nuggets"}'));
the output when run is:
i nuggets bcd
jsfiddle: http://jsfiddle.net/q80k9z2w/
and here hooked ui: http://jsfiddle.net/d1rsof1q/2/
Comments
Post a Comment