Question

我正在尝试使用JavaScript创建一个用于突出显示/审查textarea的小型示例应用程序。首先，我只是试图替换这些字母，但一旦解决了这个问题，我的计划就是使用mark.js来标记被删除的单词。现在，当我运行我的应用程序时，我得到了未捕获的TypeError：无法读取属性＆＃39;值＆＃39;第21行的null。

<html>
<head>
 <title>Syntax Highlighting</title>
</head>

<body>
 <form name="badwords" method="post" action="" >
  <textarea name="comments" rows="10" cols="60"></textarea>
 <br />
 <input id="formSub" type="submit" value="Submit!" />
 </form>
</body>
<script type="text/javascript">
 var div = document.getElementById('formSub'); 

 function replaceWords(event) {
 //Prevent form submission to server 
 event.preventDefault();
 var commentContent = document.getElementById('comments');
 var badWords = ["x", "y", "z"];
 var censored = censore(commentContent.value, badWords);
}   

function censore(string, filters) {
// "i" is to ignore case and "g" for global "|" for OR match
var regex = new RegExp(filters.join("|"), "gi");
return string.replace(regex, function (match) {
    //replace each letter with a star
    var stars = '';
    for (var i = 0; i < match.length; i++) {
        stars += '*';
    }
    return stars;
});
}

div.addEventListener('click',replaceWords); 
</script>
</html>

Answer 1

<html>
<head>
 <title>Syntax Highlighting</title>
</head>

<body>
 <form name="badwords" method="post" action="" >
  <textarea id="pesho" name="comments" rows="10" cols="60"></textarea>
 <br />
 <input id="formSub" type="submit" value="Submit!" />
 </form>
</body>
<script type="text/javascript">
 var div = document.getElementById('formSub'); 

 function replaceWords(event) {
 //Prevent form submission to server 
 event.preventDefault();
 var commentContent = document.getElementById('pesho');
 var badWords = ["crap", "fuck", "cunt"];
   console.log(commentContent.value)
   commentContent.value =censore(commentContent.value, badWords); 
}   

function censore(string, filters) {
    console.log('in')
// "i" is to ignore case and "g" for global "|" for OR match
var regex = new RegExp(filters.join("|"), "gi");
return string.replace(regex, function (match) {
    //replace each letter with a star
    var stars = '';
    for (var i = 0; i < match.length; i++) {
        stars += '*';
    }
    return stars;
});
}

div.addEventListener('click',replaceWords); 
</script>
</html>

正如我之前提到的其他人一样，你没有定位文本区域的id而是name属性，除了要对视图进行实际更改的函数，你必须更改目标元素值（参见修改过的例子）

使用JavaScript审查/突出显示

1 个答案: