Code remove [style, id, class] từ textarea bằng javascript
📅 — 👀 266 — 👦Dưới đây là mã được viết bằng javascript
với mục đích xóa kiểu, lớp, id trong chuỗi html
. Ở đây, mời bạn tham khảo.
[html]<!-- Code by ThichCode.NET -->
<div class="modal" id="myModal">
<div class="modal-content">
<span class="close">×</span>
<br />
<div id="result"></div>
</div>
</div>
<textarea id="stringHTML" style="height: 400px; margin-bottom: 20px; width: 100%;"></textarea>
<button class="btn btn-success" id="stripHTML">Remove [style, class, id]</button>
<button class="btn btn-info" id="openResult">Open Result</button>
<button class="btn btn-link" onclick="copyToClipboard(document.getElementById('stringHTML').innerHTML)">Copy</button>[/html][css]<!-- Code by ThichCode.NET -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>[/css][js]<!-- Code by ThichCode.NET -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
function copyToClipboard(text) {
if (window.clipboardData && window.clipboardData.setData) {
// IE specific code path to prevent textarea being shown while dialog is visible.
return clipboardData.setData("Text", text);
} else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
var textarea = document.getElementById('stringHTML');
textarea.textContent = text;
//textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge.
//document.body.appendChild(textarea);
textarea.select();
try {
return document.execCommand("copy"); // Security exception may be thrown by some browsers.
} catch (ex) {
console.warn("Copy to clipboard failed.", ex);
return false;
} finally {
//document.body.removeChild(textarea);
}
}
}
$('button#stripHTML').click(function() {
var stringHTML = $('textarea#stringHTML').val(); //alert(stringHTML);
//var e = $(stringHTML);
$('#result').empty().append($.parseHTML(stringHTML)); //alert(e.outerHTML);
$('#result').find('[style]').removeAttr('style');
$('#result').find('[class]').removeAttr('class');
$('#result').find('[id]').removeAttr('id');
$('textarea#stringHTML').val($('#result').html());
});
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("openResult");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>[/js]
📁 Code Demo
🔖