如何对比网页文本与用户输入的textarea文本？

其实这事没那么复杂，核心就是用JavaScript把两类文本内容拿到手，然后根据你的需求做对比——不管是简单的“一致/不一致”判断，还是要揪出具体哪里不一样，都能搞定。下面一步步来：

第一步：给元素加个“身份标识” #

首先得给网页里的目标文本和textarea都加上id，这样JS才能精准定位到它们，不然找起来太麻烦：

<!-- 网页里的参考文本 -->
<p id="reference-text">这是网页上的原始文本内容哦</p>

<!-- 用户输入的文本框 -->
<textarea id="user-input" placeholder="请输入要对比的文本..."></textarea>
<!-- 触发对比的按钮 -->
<button onclick="compareTexts()">点击对比</button>
<!-- 用来显示结果的区域 -->
<div id="result"></div>

第二步：写核心的对比函数 #

先从最基础的“一致与否”判断开始，写个简单的JS函数：

function compareTexts() {
    // 拿到网页里的参考文本，trim()是去掉前后空白，不需要可以删掉
    const referenceText = document.getElementById('reference-text').textContent.trim();
    // 拿到用户在textarea里输入的内容
    const userInputText = document.getElementById('user-input').value.trim();
    
    const resultBox = document.getElementById('result');
    
    // 直接判断内容是否完全一致
    if (referenceText === userInputText) {
        resultBox.textContent = "✅ 输入的文本和网页文本完全匹配！";
        resultBox.style.color = "green";
    } else {
        resultBox.textContent = "❌ 输入的文本和网页文本不一样哦！";
        resultBox.style.color = "red";
    }
}

进阶玩法：展示具体差异 #

如果你想让用户看到具体哪部分不一样，可以扩展下逻辑，比如给差异字符标个红色背景：

function showDetailedDiff() {
    const reference = document.getElementById('reference-text').textContent.trim();
    const userInput = document.getElementById('user-input').value.trim();
    
    let diffHtml = "";
    const maxLen = Math.max(reference.length, userInput.length);
    
    // 逐个字符对比
    for (let i = 0; i < maxLen; i++) {
        const refChar = reference[i] || "";
        const inputChar = userInput[i] || "";
        
        if (refChar !== inputChar) {
            // 差异部分用红色背景标记
            diffHtml += `<span style="background: #ffcccc;">${inputChar || "「此处为空」"}</span>`;
        } else {
            diffHtml += inputChar;
        }
    }
    
    document.getElementById('result').innerHTML = `对比结果：<br>${diffHtml}`;
}

记得把按钮的点击事件改成onclick="showDetailedDiff()"就行。

一些小提醒 #

• 如果你不想忽略前后的空白字符，就把代码里的trim()去掉。
• 如果网页里的文本是动态加载的（比如从后端接口拿的），要等文本加载完再执行对比逻辑，不然会拿不到内容哦。
• 要是需要处理超大文本的复杂差异，可以找专门的文本差异库，但普通需求的话，上面的基础逻辑完全够用。

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