Data to Tag Converter

Post Views: 4,471

Hello Friends, Today I am going to share first article of this year which is a Javascript utility tool code Data to Tag Converter. Using this you can speedup your work speed and save some time. Using this tool you can create option tag for cities, countries, weekdays, etc. or you can use it according to you need. So, Here is the code.

<html>
    <head>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    </head>
    <body>
        <div class="container" style="background: silver">
            <div class="row">
                <div class="col-md-6 col-sm-6">
                    <h1>Input</h1>
                    <textarea id="input_ta" class="form-control" rows="10" placeholder="Data (new line seprated)"></textarea>
                    <input type="text" id="conversion_pattern" class="form-control" placeholder="Conversion Pattern (for data element use ?)"/>
                </div>
                <div class="col-md-6 col-sm-6">
                    <h1>Output</h1>
                    <textarea id="output_ta" class="form-control" rows="10"></textarea>
                    <button class="btn btn-primary" style="width: 100%;" onclick="convert()">Convert</button>
                </div>
            </div>    
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <h1 class="text-center">
			<a class="btn btn-default" href="https://zatackcoder.com"><i class="glyphicon glyphicon-home"></i> Go To Home</a>
                    </h1>
                </div>        
            </div>
        </div>        
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script>
            function convert() {
                var data = $("#input_ta").val();
                arraydata = data.split("\n");
                var pattern = $("#conversion_pattern").val();
                var converted_data = "";
                for(var i=0; i<arraydata.length; i++) {
                    converted_data += pattern.replace(/\?/g,arraydata[i]) + "\n";
                }
                $("#output_ta").text(converted_data);
            }            
        </script>
    </body>
</html>

<html>

<head>

</head>

<body>

<h1>Input</h1>

</div>

<h1>Output</h1>

<button class="btn btn-primary" style="width: 100%;" onclick="convert()">Convert</button>

</div>

</h1>

</div>

function convert() {

var data = $("#input_ta").val();

arraydata = data.split("\n");

var pattern = $("#conversion_pattern").val();

var converted_data = "";

for(var i=0; i<arraydata.length; i++) {

converted_data += pattern.replace(/\?/g,arraydata[i]) + "\n";

}

$("#output_ta").text(converted_data);

}

</script>

</body>

</html>

Output

Demo

Click Here for Demo

Please share if you like