Loops through the characters of the selected text.
Replaces them with a “█”.
All in one HTML page.
Try here: Redaction Demo
Source Code:
<html>
<link rel="stylesheet" type="text/css" href="redactme.css" />
<meta charset="UTF-8" />
<title>Redaction Example</title>
<link rel="icon" type="image/x-icon" href="/x/favicon.ico">
<center>
<div class="frame">
<head>
<title>Redaction System</title>
</head>
<script>
function redactOnSubmit() {
// Check if text is selected
if (window.getSelection().toString().length === 0) {
alert("Please select text to redact first.");
return;
}
// Get the selected text
var selectedText = window.getSelection().toString();
// Redact the selected text with the actual input
var redactedText = redact(selectedText);
// Get the range of the selected text
var range = window.getSelection().getRangeAt(0);
// Create a new text node with the redacted text
var newText = document.createTextNode(redactedText);
// Replace the selected text with the redacted text
range.deleteContents();
range.insertNode(newText);
}
function redact(input) {
var length = input.length;
var redactedText = "";
for (var i = 0; i < length; i++) {
if (input.charCodeAt(i) !== 32) { // 32 is the ASCII code for a space
redactedText += "\u2588";
} else {
redactedText += " ";
}
}
return redactedText;
}
</script>
</head>
<body>
<h1 contentEditable="true"> Redact Text </h1>
<div contentEditable="true"><b>Select any text from this page and press the button to redact it.</b>
<br> <br>
Nam eget dui. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Nam pretium turpis et arcu. Aenean imperdiet. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.
Duis vel nibh at velit scelerisque suscipit. Pellentesque posuere. Morbi ac felis. Integer tincidunt. Praesent blandit laoreet nibh.
Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce convallis metus id felis luctus adipiscing. In ac felis quis tortor malesuada pretium. Morbi mattis ullamcorper velit. Suspendisse feugiat.
In hac habitasse platea dictumst. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Praesent congue erat at massa. Nunc sed turpis. Vestibulum ullamcorper mauris at ligula.
Fusce fermentum. Vivamus quis mi. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Curabitur vestibulum aliquam leo. Sed a libero.
</div>
<br><br>
<div class="button">
<input type="button" value="Apply" onclick="redactOnSubmit();">
</div>
</body>
<br><br>
<div class="srclink">
<a href="redactmesource.txt">Source Code</a>
</div>
</div>
</div>
</center>
</html>