JSFiddle - React, Tailwind, and code Playground

by AndrewKang

HTML

<h3>
Mass Update certain key-values recursively in huge, complex JSON string trees without using JSON.parse() & self-calling function.
</h3>
<div style="margin-bottom:3%;">
<a href="https://github.com/Andrew-Kang-G/json-knife" target="_blank">
https://github.com/Andrew-Kang-G/json-knife
</a>
</div>
<div>
  <button>
    Change
  </button>
</div>
<div>
		<p>
			<label for="key-input-text">Key : </label>
			<input type="text" id="key-input-text" value="Mike {[Gentleman]}">
		</p>
    		<p>
			<label for="key-input-value">Value : </label>
			null
		</p>
    <p>
       The parameter 'Value' will be set to null, but in a real library, you can set it to string or number or boolean or null type.
    </p>
</div>

<div class="container">
  <textarea>test</textarea>
</div>




<pre id="logger" class="web_console"></pre>

CSS

/* 1. TextArea*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

*,
*::before,
*::after {
  box-sizing: border-box;
}

.container {
  margin: 30px;
  background-color: #f0f0f0;
}

textarea {
  width: 100%;
  height: 500px;
  display: block;
  position: absolute;
  margin: 0;
  border: 2px solid #74637f;
  border-radius: 0;
  color: #444;
  background-color: transparent;
  overflow: auto;
  resize: none;
  transition: transform 1s;
  
}

.highlights,
textarea {
  padding: 10px;
  font: 20px/28px 'Open Sans', sans-serif;
  letter-spacing: 1px;
}



.highlights {
  white-space: pre-wrap;
  word-wrap: break-word;
  color: transparent;
}


.highlighted1 {
  border-radius: 3px;
  color: transparent;
  background-color: #b1d5e5;
}

button {
  display: block;
  width: 300px;
  margin: 30px auto 0;
  padding: 10px;
  border: none;
  border-radius: 6px;
  color: #fff;
  background-color: #74637f;
  font: 18px 'Opens Sans', sans-serif;
  letter-spacing: 1px;
  appearance: none;
  cursor: pointer;
}



textarea:focus,
button:focus {
  outline: none;
  box-shadow: 0 0 0 2px #c6aada;
}

JavaScript

var Pattern=function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var r={};return t.m=e,t.c=r,t.p="../dist/",t(0)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var a=r(1),u=n(a);t.default=u.default,e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function a(e,t,r){if(!e||"string"!=typeof e)throw new l.default('the variable "original" must be a string type and not be null.');if(!t||"string"!=typeof t)throw new l.default('the variable "key" must be a string type and not be null.');if(/"/.test(t))throw new l.default('the variable "key" must not contain double quotes, but this can be allowed in the next version.');if(!(r&&("string"==typeof r||"number"==typeof r||"boolean"==typeof r)||"object"==typeof r&&null==r))throw new l.default('the variable "value" must be a string or number or boolean or null.');return r&&"string"==typeof r&&(r=r.replace(/([^\u005C])"/g,'$1\\"')),e=e.trim(),o.default.sculpt(e,o.default.getMaterials(e,t,r))}Object.defineProperty(t,"__esModule",{value:!0});var u=r(2),o=n(u),s=r(5),l=n(s);t.default={sculptJson:a},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function a(e){for(var t=2;t<8;t++)if(void 0!==e[t])return t}function u(e,t,r){var n=0,a=new RegExp(p.default.steps.toNumberOfGap(r),""),u={};return null!==(u=a.exec(t))&&(n=u[0].length),e-n}function o(e,t){for(var r=[],n=[],a=new RegExp("(?:"+p.default.steps.withKey+")|("+p.default.commons.spaceOrEndBracketOrNot+"$)|(?:"+p.default.steps.withNoKey+")","g"),o=0,s=null,l={};null!==(l=a.exec(e));)if(l[4]){var c=o>0?r[o-1].step:0;c+=(l[5].match(new RegExp(p.default.steps.asc,"g"))||[]).length,c-=(l[5].match(new RegExp(p.default.steps.desc,"g"))||[]).length;var i=null;if(l[6]){var...