Question

在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>

Answer 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);

Answer 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>

JS审查算法

2 个答案: