JSFiddle - React, Tailwind, and code Playground

Convert HTML Code to Plain Text for vatoSupport

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
    <form action="" method="post">
        <div class="form-group">
            <label for="discText">Test It</label>
            <textarea class="form-control" name="discText" id="discText" required="required" rows="8">
<div class="modal-body">
    <p class="lead">Re-open the Support Request?</p>
</div>
            </textarea>
        </div>
        <button id="convertIt" type="input" name="submit" value="check" class="btn btn-success"><i class="fa fa-check-square-o"></i> Convert It</button>
    </form>
    
    <div class="convertedText"></div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:200,300,400,700);

* { border-radius: 0 !important; }
.convertedText { margin-top: 20px; }

JavaScript

$("#convertIt").click(function(e) {
    e.preventDefault();

    converted = ($('#discText').val().replace(/</g,'&lt;').replace(/>/g,'&gt;'));
    $('.convertedText').html(converted);
});