JS审查算法答案

【问题标题】：JS Censoring algorithmJS审查算法
【发布时间】：2019-04-22 21:56:37
【问题描述】：

在 javascript 中，我有一个数组，其中包含在 textarea 中放入一些文本后我想要审查的单词，当其中的单词与数组中的一个匹配时，它被替换为“****”。问题是：例如被禁止的词是“word1”，当我点击“审查”按钮触发事件时，textarea.value，即（例如）“word1！”正在“*****”上被替换，但我希望它是“*****！”。

没有循环，因为我只是尝试将算法应用于单个禁用词。甚至做不到。 'start' 变量用于进一步搜索 textarea.value 中的其他禁用词。一切都应该使用基本的字符串/数组方法来完成，而不是使用正则表达式。

let getId = x => document.getElementById(x);
let banned = ['word1','word2','word3'];
let start = 0;

getId('censor').addEventListener('click', function(){
let stars = '';
for(let i=0;i < banned[0].length; i++) {
    stars+= '*';
}
let str = getId('text').value;
str = str.split(' ');
let found = str.indexOf(banned[0],start);
str.splice(found,1, stars);
str = str.join(' ');
getId('text').value = str;
})

<div class="container">
    <form action="">
        <input type="text" id="banInput">
        <input type="button" value="Add word" id="add">
    </form>
    <textarea name="" id="text"></textarea>
    <input type="button" value="censor" id="censor">
</div>

【问题讨论】：

您可以使用 replace 将找到的确切单词替换为星号，这样可以保持单词的其余部分不变。

标签： javascript html arrays string

【解决方案1】：

最简单的解决方案是使用正则表达式来过滤每个被删词列表中的单词。

下面我在String.replace 语句中执行此操作以简化流程。

//Censor function
var censored = [];
function censor(input) {
    return input.replace(/\w+/igm, function (word) {
        if (censored.some(function (cWord) { return cWord.toLowerCase() === word.toLowerCase(); })) {
            return word.replace(/./igm, '*');
        }
        return word;
    });
}
// HTML NODES
var inputField = document.body.appendChild(document.createElement("textarea"));
var outputField = document.body.appendChild(document.createElement("textarea"));
outputField.readOnly = true;
document.body.appendChild(document.createElement("br"));
var listInput = document.body.appendChild(document.createElement("input"));
listInput.title = listInput.placeholder = "insert censored words, seperate by \" \"";
listInput.value = '';
//Update functions
function updateOutput() {
    outputField.value = censor(inputField.value);
}
function updateCensorList() {
    censored = listInput.value.split(" ");
    if (censored == null) {
        censored = [''];
    }
    else {
        censored = censored.map(function (a) { return a.trim(); });
    }
    updateOutput();
}
//Bind events
listInput.addEventListener("change", updateCensorList);
listInput.addEventListener("keyup", updateCensorList);
inputField.addEventListener("change", updateOutput);
inputField.addEventListener("keyup", updateOutput);

【讨论】：

【解决方案2】：

let getId = x => document.getElementById(x);
let banned = ['word1', 'word2', 'word3'];

getId('add').addEventListener('click', function() {
  banned.push(getId('banInput').value)
  getId('banInput').value = ''
  console.log(banned)
})

getId('censor').addEventListener('click', function() {

  let str = getId('text').value;
  let arr = str.split(/\b/) // array of words
  let censored = arr.map(word => banned.includes(word) ? //if word is in banned
    '*'.repeat(word.length) // replace with *
    :
    word) // leave as is

  getId('text').value = censored.join(''); // back to string
})

<div class="container">
  <form action="">
    <input type="text" id="banInput">
    <input type="button" value="Add word" id="add">
  </form>
  <textarea name="" id="text"></textarea>
  <input type="button" value="censor" id="censor">
</div>

【讨论】：