Typecho 文档：监听评论「遥遥领先」

2023年09月12日

适用程序：Typecho
程序版本：1.2.1
文档作者：Lopwon
作者博客：Lopwon.com
发布页面：Lopwon.com/3561.html
许可方式：CC BY-NC-SA
官方演示：遥遥领先

注意：此文档源于作者在博客改造中的一些经验总结，转载还请署名。

敬告：此文档操作涉及程序核心文件的修改，作者不对你在使用中产生的任何问题造成的不良后果，承担责任。
文档说明

最近，华为「遥遥领先」有点洗脑，不被监听成了出海销售的卖点，由此得到启发，有了本文档：通过实时监听评论输入框的内容，当检测到评论者输入了博主事先自定义的敏感词后，即时将其替换为 *** 并弹出浮层提示。

相对于之前制作的，在后端实现评论脱敏的 Lopwon Oops 插件，以下方法是在前端处理敏感词，也能弹出提示信息。

提示：此方法会被不讲武德的手段（比如：使用空格、横杠隔开），绕过关键词脱敏，所以，没有后端脱敏有效。

使用方法

A 涉及文件

usr/themes/***/footer.php

B 改造文件

作用：给评论框添加关键词脱敏功能

在主题的适当文件适当位置（如：文件 footer.php 页脚处）引入以下代码（留意注释，以及按需修改）：


    <style>
    .Lopwon_Popup {
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        padding: 20px;
        background-color: #eee;
        border: 1px solid #ccc;
        border-radius: 5px;
        display: none;
    }
    </style>

    <div id="Lopwon_Popup" class="Lopwon_Popup"></div>

    <script>
    var keywords = [
        '苹果',
        '联想',
    ]; // 在数组里自定义更多关键词，这些关键词在评论内容中，会被脱敏！

    function checkInput() {
        var textarea = document.getElementById("textarea"); // 评论框 <textarea> id 名称，通常为 textarea
        var input = textarea.value; // 获取 textarea 中的文本内容
        var popup = document.getElementById("Lopwon_Popup"); // 获取弹出提示框元素

        for (var i = 0; i < keywords.length; i++) {
            var keyword = keywords[i]; // 获取当前关键词

            if (input.includes(keyword)) {
                popup.style.display = "block"; // 显示弹出提示框
                popup.innerHTML = "检测到敏感词：" + keyword; // 设置提示框内容

                input = input.replace(new RegExp(keyword, "g"), "***"); // 实时替换关键词
                textarea.value = input; // 更新 textarea 中的文本内容

                setTimeout(function() {
                    popup.style.display = "none"; // 2 秒后隐藏提示框
                }, 2000);
                
                break;
            }
        }

        if (input.length === 0) {
            popup.style.display = "none"; // 如果文本内容为空，默认隐藏提示框
        }
    }

    function handlePaste(event) {
        setTimeout(checkInput, 0); // 延迟执行 checkInput 来处理粘贴事件
    }
   
    var textarea = document.getElementById("textarea"); // 获取 textarea 元素并添加事件监听器
    textarea.addEventListener("input", checkInput); // 监听输入事件，触发 checkInput 函数
    textarea.addEventListener("paste", handlePaste); // 监听粘贴事件，触发 handlePaste 函数
    </script>


至此，已可以实现监听评论「遥遥领先」功能。
store