使用JavaScript实现文本框审查/高亮时遇TypeError问题求助

我来帮你排查这个问题，这个错误的根源很明确，咱们一步步来解决：

错误原因分析 #

• 文本框获取失败：你用document.getElementById('comments')尝试获取文本框，但你的<textarea>标签只设置了name="comments"，没有对应的id="comments"属性。getElementById只会匹配元素的id属性，所以这个调用返回了null，当你尝试读取null的value属性时就触发了这个错误。
• 额外小问题：你已经写了审查逻辑，但处理后的内容没有放回文本框，就算修复了错误，用户也看不到审查后的效果。

修复步骤 #

1. 给<textarea>添加id="comments"属性，让getElementById能正确找到它。
2. 把审查后的内容赋值回文本框的value属性，让用户能看到结果。
3. （可选）把变量名div改成更有意义的submitBtn，提升代码可读性。

修复后的完整代码 #

<html> 
<head> 
    <title>Syntax Highlighting</title> 
</head> 
<body> 
    <form name="badwords" method="post" action="" > 
        <!-- 添加id属性 -->
        <textarea id="comments" name="comments" rows="10" cols="60"></textarea> 
        <br /> 
        <input id="formSub" type="submit" value="Submit!" /> 
    </form> 
</body> 
<script type="text/javascript"> 
    // 变量名更清晰
    const submitBtn = document.getElementById('formSub'); 

    function replaceWords(event) { 
        // 阻止表单提交
        event.preventDefault(); 
        // 现在能正确获取到文本框元素了
        const commentContent = document.getElementById('comments'); 
        const badWords = ["x", "y", "z"]; 
        const censored = censore(commentContent.value, badWords); 
        // 将审查后的内容放回文本框
        commentContent.value = censored;
    } 

    function censore(string, filters) { 
        // 构建正则表达式，忽略大小写且全局匹配
        const regex = new RegExp(filters.join("|"), "gi"); 
        return string.replace(regex, function (match) { 
            // 用等长的星号替换匹配到的词汇
            let stars = ''; 
            for (let i = 0; i < match.length; i++) { 
                stars += '*'; 
            } 
            return stars; 
        }); 
    } 

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

后续扩展建议 #

如果之后要改用mark.js来标记审查词汇，只需要把替换逻辑改成调用mark.js的API即可，比如：

// 假设已经引入了mark.js
const markInstance = new Mark(commentContent);
markInstance.mark(badWords, {
    className: 'censored-word',
    // 可以自定义样式
    style: {
        backgroundColor: 'yellow',
        color: 'black'
    }
});

这样就能实现高亮显示敏感词汇的效果了。

内容的提问来源于stack exchange，提问作者Antonio B