当前位置：首页 > JavaScript

js实现文本追踪

2026-02-02 21:50:54JavaScript

实现文本追踪的方法

使用JavaScript实现文本追踪通常涉及监听用户输入、选择或修改文本的行为。以下是几种常见的实现方式：

监听输入事件 通过addEventListener绑定input或keyup事件，可以实时追踪文本框内容变化：

const textField = document.getElementById('textField');
textField.addEventListener('input', function(event) {
    console.log('当前文本:', event.target.value);
});

获取选中文本 使用window.getSelection()方法可以追踪用户选择的文本内容：

document.addEventListener('mouseup', function() {
    const selectedText = window.getSelection().toString();
    if (selectedText) {
        console.log('选中文本:', selectedText);
    }
});

内容可编辑元素的追踪 对于contenteditable元素，需要监听多种事件以确保完整追踪：

const editableDiv = document.getElementById('editableDiv');
editableDiv.addEventListener('blur', function() {
    console.log('最终内容:', this.innerHTML);
});

高级追踪技术

MutationObserver API 当需要追踪DOM节点的文本变化时，可以使用MutationObserver：

const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.type === 'characterData') {
            console.log('文本修改为:', mutation.target.data);
        }
    });
});

observer.observe(document.getElementById('target'), {
    characterData: true,
    subtree: true
});

光标位置追踪 追踪光标在文本输入框中的位置：

const input = document.getElementById('inputField');
input.addEventListener('click', function() {
    console.log('光标位置:', this.selectionStart);
});

实际应用示例

实时字数统计 结合输入事件监听实现实时字数统计：

const textarea = document.getElementById('myTextarea');
const counter = document.getElementById('counter');

textarea.addEventListener('input', function() {
    counter.textContent = `已输入 ${this.value.length} 个字符`;
});

文本差异比较 使用第三方库如diff-match-patch来比较文本变化：

const dmp = new diff_match_patch();
const oldText = "原始文本";
const newText = "修改后的文本";

const diffs = dmp.diff_main(oldText, newText);
console.log('文本差异:', diffs);