JSFiddle - React, Tailwind, and code Playground

by Florian

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<body>
	<div class="jumbotron">
		<div class="container text-center">
			<h1>jQuery text replacment test</h1>
		</div>
	</div>
	<div class="container">
		<div class="text-center">
			<div class="row">
				<div class="col-md-12">
					<a id="replacer" class="btn btn-primary">Replace Shortcodes</a>
				</div>
				<div class="col-md-12">
                    <p>Input</p>
                    <textarea class="content" cols="80" rows="25">
[fullwidth backgroundcolor="" backgroundimage=""]
    [fusion_text]
        Test Text 1
    [/fusion_text]
[/fullwidth]
[fullwidth backgroundcolor="" backgroundimage=""]
    [one_third]
        [fusion_text]
            Test Text 2
        [/fusion_text]
    [/one_third]
    [one_third]
        [fusion_text]
            Test Text 3
        [/fusion_text]
    [/one_third]
    [one_third]
        [fusion_text]
            Test Text 4
        [/fusion_text]
    [/one_third]
[/fullwidth]</textarea>
				</div>
                <div class="col-md-12">
                    <p>Expected result</p>
					<textarea class="resultcontent" cols="80" rows="25">
[vc_row color="" image=""]
    [vc_column width="1/1"]     <!-- This one is missing -->
        [vc_column_text]
            Test Text 1
        [/vc_column_text]
     [/vc_column]               <!-- And this one -->
[/vc_row]
[vc_row color="" image=""]
    [vc_column width="1/3"]
        [vc_column_text]
            Test Text 2
        [/vc_column_text]
    [/vc_column]
    [vc_column width="1/3"]
        [vc_column_text]
            Test Text 3
        [/vc_column_text]
    [/vc_column]
    [vc_column width="1/3"]
        [vc_column_text]
            Test Text 4
        [/vc_column_text]
   ...

JavaScript

$("#replacer").click(function() {
    var text = $(".content").html().split("]");
    for (var i = 0, l = text.length; i < l; i++) {
        if (text[i].indexOf("fullwidth") >= 0) {
            text[i] = text[i]
              .replace("backgroundcolor", "color")
              .replace("backgroundimage", "image");
        }
    }
    $(".content").html(text.join("]"));
    
  	$(".content").text($(".content").text()
        .split("[fullwidth").join("[vc_row")
        .split("[/fullwidth]").join("[/vc_row]")
        .split("[fusion_text]").join("[vc_column_text]")
        .split("[fusion_text]").join("[vc_column_text]")
        .split("[/fusion_text]").join("[/vc_column_text]")
        .split("[one_third]").join('[vc_column width="1/3"]')
        .split("[/one_third]").join('[/vc_column]')
     );
});