I am building a text censor web app, which would censor any words from a textarea which are between quotation marks. E.g The dog is "red" = The dog is "XXX", The dog is "quite big" = The dog is "XXXXX XXX".
I currently have it set so that any word from a key list of words ( currently red ) gets censored, but would like to change it to any word between quotations (" ") becomes censored.
I am using HTML, JS and some CSS, but I have tried a lot of things and nothing seems to work, I keep getting js errors in the console.
var div = document.getElementById('formSub');
function censorWords(event) {
event.preventDefault();
var textContent = document.getElementById('input');
//List of key words to censor
var redacted = ["red"];
console.log(textContent.value)
textContent.value = censored(textContent.value, redacted);
}
function censored(string, filters) {
console.log('in')
// "i" ignores case, "g" for global and "|" for OR match
var regexp = new RegExp(filters.join("|"), "gi");
return string.replace(regexp, function (match) {
//this is where the words are replaced with X
var censorship = '';
for (var i = 0; i < match.length; i ) {
censorship = 'X';
}
return censorship
})
}
div.addEventListener('click', censorWords)html {
background-color: rgb(42, 44, 53) ;
}
body h1 {
font-size: 2rem;
color: white;
position: absolute;
left: 50%;
top: 1%;
transform: translateX(-50%);
text-align: center;
}
body p {
font-size: 1.5rem;
color: white;
position: absolute;
left: 50%;
top: 6%;
transform: translateX(-50%);
text-align: center;
width: 80%;
}
.inputform {
position: absolute;
left: 50%;
top: 30%;
transform: translateX(-50%);
text-align: center;
width: 100%;
height: 100%;
}
textarea {
display: inline-block;
margin: 0;
padding: .2em;
width: auto;
min-width: 80%;
height: auto;
min-height: 20%;
cursor: text;
background-color: #eee;
overflow: auto;
resize: both;
border: 3px solid #ffffff;
background-color: rgb(56, 59, 70) ;
color: #ffffff;
}
@media only screen and (max-width: 740px) {
.inputform {
position: absolute;
left: 50%;
top: 30%;
transform: translateX(-50%);
text-align: center;
width: 100%;
height: 100%;
padding-top: 20%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Censor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Text Censor</h1>
<p>This text censor will remove any key words, and replace them with 'X's. To begin, input text into box
press 'Censor Text', and your censored text is ready to go!
</p>
<form name="redacted" method="post" action="">
<textarea id="input" name="text"></textarea>
<br />
<input id="formSub" type="submit" value="Censor Text" />
</form>
<script src="/js/main.js"></script>
</body>
</html>CodePudding user response：
Assuming there are not going to be words with " in them, you can use split function.
var sentence = 'The dog is "red" = The dog is "quite big sir"'
console.log(sentence)
function censor_word(word) {
return word.replace(/\S/g, "*");
}
var arr = sentence.split('"');
if (arr.length % 2 == 0) {
console.error("Illegal double quotes in message")
}
for (var i = 1; i < arr.length; i = 2) {
var to_censor = arr[i];
var censored = censor_word(to_censor);
arr[i] = censored;
}
var result = arr.join('"')
console.log(result)
// or in one line
var result2 = sentence.split('"').map((element, index) => index % 2 == 0 ? element : element.replace(/\S/g, "*")).join('"')
console.log(result2)CodePudding user response：
Split the string into an array by quotes, and replace every odd word.
const testString = 'The quick "brown" fox ate his lunch';
function removeWordsInQuotes(string) {
let wordArray = string.split('"');
for (let index = 0; index < wordArray.length; index ) {
const element = wordArray[index];
if (index % 2 === 1) {
//this is where the words are replaced with X
let censorship = '';
for (let j = 0; j < element.length; j ) {
censorship = 'X';
}
wordArray[index] = censorship;
}
}
return wordArray.join('"');
}
console.log(removeWordsInQuotes(testString)); // "The quick 'XXXXX' fox ate his lunch"
CodePudding user response：
This is a pretty simple version of censored:
const censored = (w) =>
w .replace(/"([^"] )"/g, (_, s) => `"${s.replace(/\S/g, 'X')}"`)
We find all text between two quotation marks, replace it by replacing all its non-space characters with 'X', and return the new value. It wouldn't work with nested quotes, but that would be strange to support anyway.
We can see it in action in this snippet:
const censorWords = (event) => {
event .preventDefault ()
var textContent = document .getElementById ('input')
textContent .value = censored (textContent .value)
}
const censored = (w) =>
w .replace(/"([^"] )"/g, (_, s) => `"${s.replace(/\S/g, 'X')}"`)
document.getElementById('formSub') .addEventListener ('click', censorWords)html {background-color: rgb(42, 44, 53);}
.inputform {position: absolute; left: 50%; transform: translateX(-50%); text-align: center; width: 100%; height: 100%;}
textarea {display: inline-block; margin: 0; padding: .2em; width: auto; min-width: 80%; height: auto; min-height: 20%; cursor: text; background-color: #eee; overflow: auto; resize: both; border: 3px solid #ffffff; background-color: rgb(56, 59, 70); color: #ffffff;}<form name="redacted" method="post" action="">
<textarea id="input" name="text">Add text here with "words you want to censor" contained in "quotes". Then press the button.</textarea>
<br />
<input id="formSub" type="submit" value="Censor Text" />
</form>