JSFiddle - React, Tailwind, and code Playground
HTML
<p>
<textarea id='message' autofocus maxlength="500" rows="4" cols="50"></textarea>
</p>
CSS
.strip-tags-option {
display: inline-block;
margin-right: 10px;
}
.strip-tag-button {
border: 1px solid black;
text-align: center;
}
.strip-tag-button:hover {
cursor: pointer;
color: white;
background-color: gray;
}
JavaScript
jQuery.fn.extend({
stripHtmlTags: function() {
function getDivContent(input) {
return $('<div></div>').html(input.val());
};
function addCheckboxes(input) {
var div = getDivContent( input );
input.siblings('.tags-checkboxes').remove();
var tagsCheckboxes = $('<div class="tags-checkboxes"></div>');
var fake = getDivContent(input);
var allTags = [];
fake.find('*').each(function(i) {
var thisTag = $(this).prop("tagName").toLowerCase();
if( $.inArray(thisTag, allTags)==-1 ) {
allTags.push( thisTag );
};
});
$.each(allTags, function(t, tag) {
var uniqueId = tag + '-' + Math.round(new Date().getTime() + (Math.random() * 100));
tagsCheckboxes.append('<span class="strip-tags-option"><input type="checkbox" id="' + uniqueId + '" value="' + tag + '" checked="checked" /> <label for="' + uniqueId + '">' + tag + '</label></span>');
});
input.after( tagsCheckboxes );
return tagsCheckboxes;
};
function addStripButton(input) {
var button = $('<button class="strip-tag-button">STRIP TAGS</button>');
input.next().after( button );
return button;
}
function strip(input, checkboxes) {
var fake = getDivContent(input);
var tagsArray = [];
checkboxes.find('input').each(function(i) {
var thisCheckbox = $(this);
if( thisCheckbox.is(':checked') ) {
tagsArray.push( thisCheckbox.val() );
};
});
var tags = tagsArray.join(', ');
console.log( tags );
fake.find(tags).contents().unwrap();
fake.find(tags).remove();
input.val(fake.html());
addCheckboxes(input);
};
return...