从两个字符串中获取编辑

2023-11-23

我将深入探讨我的问题,如果您不想阅读所有内容,可以跳至 TL;DR

我正在尝试做什么

我需要存储一个“文件”(文本文件)可以由用户编辑。如果我有原始文件(这可能是巨大的)

Lorem ipsum dolor 坐 amet

用户要进行更改:

Foo ipsum amet_ 坐

基本上,我有原始字符串和用户编辑的字符串。我想找出差异"edits"。为了防止存储重复的很大字符串。我想存储原始内容和“编辑内容”。然后将编辑应用到原始内容。有点像重复数据删除。问题是我不知道编辑有多么不同,而且我还需要能够将这些编辑应用到字符串。

Attempts

因为文本可能很大,所以我想知道在不存储两个单独版本的情况下存储对文本的编辑的最“有效”方法是什么。我的第一个猜测是:

var str = 'Original String of text...'.split(' ') || [],
    mod = 'Modified String of text...'.split(' ') || [], i, edits = [];

for (i = 0; i < str.length; i += 1) {
    edits.push(str[i]===mod[i] ? undefined : mod[i]);
}

console.log(edits); // ["Modified", null, null, null] (desired output)

然后恢复:

for (i = 0; i < str.length; i += 1) {
    str[i] = edits[i] || str[i];
}
str.join(' '); // "Modified String of text..."

基本上,我试图将文本按空格分割成数组。比较数组并存储差异。然后应用差异来生成修改后的版本

Problems

但如果空间量发生变化,就会出现问题:

str: Original String of text... mod: OriginalString of text...

Output: OriginalString of text... text...

我想要的输出:OriginalString of text...


就算我要换str.length with mod.length and edits.length like:

// Get edits
var str = 'Original String of text...'.split(' ') || [],
    mod = 'Modified String of text...'.split(' ') || [], i, edits = [];

for (i = 0; i < mod.length; i += 1) {
    edits.push(str[i]===mod[i] ? undefined : mod[i]);
}

// Apply edits
var final = [];
for (i = 0; i < edits.length; i += 1) {
    final[i] = edits[i] || str[i];
}
final = final.join(' ');

edits将会:["ModifiedString", "of", "text..."]结果使整个“存储编辑”变得毫无用处。如果添加/删除一个单词,情况会更糟。如果str将成为Original String of lots of text...。输出仍然是一样的。


我可以看到我这样做的方式有很多缺陷,但我想不出任何其他方法。

Snippet:

document.getElementById('go').onclick = function() {
  var str = document.getElementById('a').value.split(' ') || [],
    mod = document.getElementById('b').value.split(' ') || [],
    i, edits = [];

  for (i = 0; i < mod.length; i += 1) {
    edits.push(str[i] === mod[i] ? undefined : mod[i]);
  }

  // Apply edits
  var final = [];
  for (i = 0; i < edits.length; i += 1) {
    final[i] = edits[i] || str[i];
  }
  final = final.join(' ');
  alert(final);
};

document.getElementById('go2').onclick = function() {
  var str = document.getElementById('a').value.split(' ') || [],
    mod = document.getElementById('b').value.split(' ') || [],
    i, edits = [];

  for (i = 0; i < str.length; i += 1) {
    edits.push(str[i] === mod[i] ? undefined : mod[i]);
  }

  for (i = 0; i < str.length; i += 1) {
    str[i] = edits[i] || str[i];
  }
  alert(str.join(' ')); // "Modified String of text..."
};
Base String:
<input id="a">
<br/>Modified String:
<input id="b" />
<br/>
<button id="go">Second method</button>
<button id="go2">First Method</button>

TL;DR:

你如何找到两个字符串之间的变化?


I'm dealing with large pieces of text each could be about a megabyte hundred kilobytes. This is running on the browser


编辑:添加了可以处理多个文本区域的修改脚本。

这是 JSFiddle对于具有多个可编辑文本区域的页面。 (不要忘记打开开发工具来查看编辑内容。)您只需为每个文本区域分配一个唯一的 ID。然后,使用这些 id 作为键、每个文本区域的编辑数组作为值创建一个地图。这是更新后的脚本:

'use strict';

function Edit(type, position, text) {
  this.type = type;
  this.position = position;
  this.text = text;
}

var ADD = 'add';
var DELETE = 'delete';

var textAreaEditsMap = {};

var cursorStart = -1;
var cursorEnd = -1;
var currentEdit = null;
var deleteOffset = 1;

window.addEventListener('load', function() {
  var textareas = document.getElementsByClassName('text-editable');

  for (var i = 0; i < textareas.length; ++i) {
    var textarea = textareas.item(i);
    var id = textarea.getAttribute('id');

    textAreaEditsMap[id] = [];
    textarea.addEventListener('mouseup', handleMouseUp);
    textarea.addEventListener('keydown', handleKeyDown);
    textarea.addEventListener('keypress', handleKeyPress);
  }
});

function handleMouseUp(event) {
  cursorStart = this.selectionStart;
  cursorEnd = this.selectionEnd;
  currentEdit = null;
}

function handleKeyDown(event) {

  cursorStart = this.selectionStart;
  cursorEnd = this.selectionEnd;

  if (event.keyCode >= 35 && event.keyCode <= 40) { // detect cursor movement keys
    currentEdit = null;
  }

  // deleting text
  if (event.keyCode === 8 || event.keyCode === 46) {
    if (currentEdit != null && currentEdit.type !== 'delete') {
      currentEdit = null;
    }

    if (cursorStart !== cursorEnd) { // Deleting highlighted text
      var edit = new Edit(DELETE, cursorStart, this.innerHTML.substring(cursorStart, cursorEnd));
      textAreaEditsMap[this.getAttribute('id')].push(edit);
      currentEdit = null;

    } else if (event.keyCode === 8) { // backspace
      if (currentEdit == null) {
        deleteOffset = 1;
        var edit = new Edit(DELETE, cursorStart, this.innerHTML[cursorStart - 1]);
        textAreaEditsMap[this.getAttribute('id')].push(edit);
        currentEdit = edit;
      } else {
        ++deleteOffset;
        currentEdit.text = this.innerHTML[cursorStart - 1] + currentEdit.text;
      }

    } else if (event.keyCode === 46) { // delete
      if (currentEdit == null) {
        deleteOffset = 1;
        var edit = new Edit(DELETE, cursorStart, this.innerHTML[cursorStart]);
        textAreaEditsMap[this.getAttribute('id')].push(edit);
        currentEdit = edit;

      } else {
        currentEdit.text += this.innerHTML[cursorStart + deleteOffset++];
      }
    }
  }

  console.log(textAreaEditsMap)
}

function handleKeyPress(event) {

  if (currentEdit != null && currentEdit.type !== 'add') {
    currentEdit = null;
  }

  if (currentEdit == null) {
    currentEdit = new Edit(ADD, cursorStart, String.fromCharCode(event.charCode));
    textAreaEditsMap[this.getAttribute('id')].push(currentEdit);
  } else {
    currentEdit.text += String.fromCharCode(event.charCode);
  }

  console.log(textAreaEditsMap);
}

带有仅处理一个文本区域的原始脚本的原始帖子如下:

我制作了一个示例脚本,可以满足您的需要。我放了一个工作示例在 JSFiddle 上。确保在 JSFiddle 示例页面上按 ctrl+shift+J 打开开发工具,以便您可以看到编辑时记录的编辑数组。编辑按时间顺序添加到 edits 数组中,因此您可以通过按时间倒序(即向后迭代数组)应用相反操作(即添加删除的文本;删除添加的文本)来恢复到原始文本。我没有从上下文菜单或通过键绑定处理复制、粘贴、撤消或重做,但我认为您应该能够使用此示例作为指导来处理这些事情。这是脚本:

'use strict';

function Edit(type, position, text) {
  this.type = type;
  this.position = position;
  this.text = text;
}

window.addEventListener('load', function() {
  var ADD = 'add';
  var DELETE = 'delete';

  var cursorStart = -1;
  var cursorEnd = -1;
  var edits = [];
  var currentEdit = null;
  var deleteOffset = 1;

  var textarea = document.getElementById('saved-text');

  textarea.addEventListener('mouseup', function(event) {
    cursorStart = this.selectionStart;
    cursorEnd = this.selectionEnd;
    currentEdit = null;
  });

  textarea.addEventListener('keydown', function(event) {

    cursorStart = this.selectionStart;
    cursorEnd = this.selectionEnd;

    if(event.keyCode >= 35 && event.keyCode <= 40) { // detect cursor movement keys
      currentEdit = null;
    }

    // deleting text
    if(event.keyCode === 8 || event.keyCode === 46) {
      if(currentEdit != null && currentEdit.type !== 'delete') {
        currentEdit = null;
      }

      if(cursorStart !== cursorEnd) {
        var edit = new Edit(DELETE, cursorStart, textarea.innerHTML.substring(cursorStart, cursorEnd));
        edits.push(edit);
        currentEdit = null;

      } else if (event.keyCode === 8) { // backspace
        if (currentEdit == null) {
          deleteOffset = 1;
          var edit = new Edit(DELETE, cursorStart, textarea.innerHTML[cursorStart - 1]);
          edits.push(edit);
          currentEdit = edit;
        } else {
          ++deleteOffset;
          currentEdit.text = textarea.innerHTML[cursorStart - 1] + currentEdit.text;
        }

      } else if (event.keyCode === 46) { // delete
        if(currentEdit == null) {
          deleteOffset = 1;
          var edit = new Edit(DELETE, cursorStart, textarea.innerHTML[cursorStart]);
          edits.push(edit);
          currentEdit = edit;

        } else {
          currentEdit.text += textarea.innerHTML[cursorStart + deleteOffset++];
        }
      }
    }

    console.log(edits)
  });

  textarea.addEventListener('keypress', function(event) {

    if(currentEdit != null && currentEdit.type !== 'add') {
      currentEdit = null;
    }

    // adding text
    if(currentEdit == null) {
      currentEdit = new Edit(ADD, cursorStart, String.fromCharCode(event.charCode));
      edits.push(currentEdit);
    } else {
      currentEdit.text += String.fromCharCode(event.charCode);
    }

    console.log(edits);
  });

});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从两个字符串中获取编辑 的相关文章

  • 验证以防止角度形式出现重复的形式值

    我有几个表单数组 我需要进行验证 以便每个表单行中的特定字段在所有表单数组中必须是唯一的 如果任何值出现多次 则两个表单字段都必须标记为红色 我设法编写了一个函数 以便如果这些字段有任何更改 该函数将返回 true false 但我不确定如
  • 之后的脚本会阻止 DOM 加载

    考虑以下代码 div class box div 令我惊讶的是 DOM 延迟了十秒的加载 10秒后出
  • 如何提取 Backbone 集合的属性

    我想从 Backbone 集合创建一个特定属性值的数组 var days select this collection models function model return model attributes type session d
  • 与拉斐尔的路径位置

    我如何使用 raphael js 更改路径位置 很奇怪的是 明显的方法不起作用 var p paper path some path string p attr fill red p attr x 200 y 100 not working
  • 考虑使用“jsdom”测试环境

    我有这个简单的测试 import React from react import render from testing library react import Button from describe Button gt it rend
  • ES6 在defineAsyncComponent 中命名导入

    我想异步加载我的网络应用程序的一些元素 这是旧的导入 import Popover PopoverButton PopoverPanel from headlessui vue export default components Popov
  • Nightmare.js 截图缓冲区长度 0

    我正在运行一个 night js 脚本 我试图在其中截取页面上多个元素的屏幕截图 The first元素被捕获得很好 但折叠下方的所有其他元素都以零长度捕获 我正在努力调试这个问题 任何帮助将非常感激 基本上这个脚本会遍历一个页面并选择al
  • 显示 div 内的用户名列表

    我是 jQuery 新手 在我的项目中 我创建了一个类User其中代码如下所示 static ConcurrentDictionary
  • 如何将 iLike 运算符与 Sequelize 结合使用来进行不区分大小写的查询

    我使用 Sequelize 和 PostgreSQL 来管理我的数据库 我想执行不区分大小写的搜索查询 当我用谷歌搜索时 有人说我可以使用 iLike 运算符来做到这一点 我尝试以这种方式实现 var getRadiosByGenre fu
  • Xml、xsl Javascript 排序

    我正在寻找一种使用 javascript 对 xml 数据进行排序的方法 并希望最终过滤掉数据 我知道这一切都可以在 xsl 文件中实现 但我想在客户端进行 我已经搜索了多个使用 javascript 进行排序的地方 但其中大部分要么太特定
  • 移动设备上的剩余悬停效果

    我一整天都在努力做这个JSFiddle http jsfiddle net gsamaras q2w4jjyt 4 也适用于手机 但我所有的尝试都没有效果 在桌面上 当用户将鼠标悬停在箭头上时 它会变成红色 在移动设备上 当用户触摸 为了单
  • Safari 和 Edge 中的 audioContext.copyToChannel() 替代方案

    Safari 和 Edge 都不支持audioContext copyToChannel 函数用自定义内容填充audioBuffer 还有其他方法吗 就我而言 我想创建一个脉冲响应 用该响应填充缓冲区 并将一些声音与该缓冲区进行卷积 对于
  • jQuery/JavaScript“this”指针混淆

    当函数时 this 的行为bar被称为让我困惑 请参阅下面的代码 当从单击处理程序调用 bar 时 有什么方法可以将 this 安排为普通的旧 js 对象实例 而不是 html 元素 a class with a method functi
  • 防止 Firefox Web 通知自动关闭

    我已经在 Firefox 中将 Web 通知与服务器发送的 DOM 事件结合使用 不幸的是 通知在大约两到三秒后消失 我更喜欢 Chrome 的方法 即让消息保持可见 在任何给定时间最多显示三个 直到用户单击通知 这是我所拥有的 windo
  • Ace Editor 自动完成和多种语言

    如何为 Ace 编辑器创建自动完成功能以及如何突出显示 php 中的 html javascript 和 csshttp ace ajax org http ace ajax org
  • 使用 Javascript 从 HTML 表格输入单元格获取值

    我使用 Javascript 动态创建了一个 HTML 表 其中第一列由文本字段组成 第二列由输入字段组成 第三列由文本字段组成 效果很好 nrOfRows document getElementById myId value get nr
  • 电子节点集成不起作用,也普遍奇怪的电子行为[重复]

    这个问题在这里已经有答案了 我是 Electron 的新手 我一直在努力让它工作 我遇到了无法解释的行为 所以这里有一个总结 我无法让 Electron 和 html 之间的通信正常工作 即使我有nodeIntegration true 网
  • IE8 - 隐藏 div 内的表单,返回键不再起作用

    我有一个登录表单 位于带有 display none 的 div 中 然后我使用 jquery 淡入表单 但 Enter Return 键不再提交表单 如果我将显示更改为阻止 则效果很好 此问题仅存在于 IE 中 有任何想法吗 这是一个不起
  • 阻止 Chrome 扩展程序的 popup.html 自动打开

    我正在创建一个 Chrome 扩展程序 其中包含background html每分钟从 API 请求一次信息的文件 收到信息后 它会发送消息popup html弹出窗口使用 JSON 信息将新的 HTML 元素附加到弹出窗口的主体上 问题是
  • 使用 ASP.Net 和 Ajax 的登录页面

    我正在尝试使用 html ajax 和 ASP NET 制作登录页面 数据确实传递给 ajax 函数 但是当我调试 asp 页面时 用户名和密码以 NULL 发送 该代码应该获取用户名和密码 然后返回用户 ID html页面 div Use

随机推荐

  • Angular 2 路由器 - 命名出口

    文档不是很好 但我试图在同一页面 路由上有不同的路由器出口 我的 app component html 中有这个
  • mvccontrib 测试助手并验证 http post 路由和参数

    在我的 Asp net MVC 应用程序中 我在控制器上有两种方法 一种用于用户第一次到达视图时 另一种用于用户在所述视图上提交表单时 public ActionResult Foo AcceptVerbs HttpVerbs Post p
  • 通过标签名称获取多个元素并在循环中检查元素标签以回显它

    这是有效的代码示例 doc gt loadHTML article header imgs doc gt getElementsByTagName img foreach imgs as img imgs取自 doc带有标签名称的元素img
  • 为什么某些 .onion 站点会收到“SOCKS 连接失败。规则集不允许连接”的信息?

    我正在尝试使用 Node 和ocks5 https 客户端 由于某种原因 某些 Tor 隐藏服务 onion 站点返回时出现连接错误 例如 连接到 DuckDuckGo 3g2upl4pq6kufc4m onion 工作并返回 HTML 但
  • 将 float[] 转换为 byte[] 再次转换为 float[]

    所以我在这里想做的是得到一个float 将其转换为byte 将其作为数据报包通过网络发送 然后将其转换回byte 在接收终端 现在我知道我可以转换float to byte 通过使用getBytes 方法 但我不知道如何反转转换 我想你想利
  • 将模板化基类转换运算符引入派生范围

    我有一个基类 它定义了约束模板化转换运算符 struct base template
  • 为什么 .NET 字符串是不可变的? [复制]

    这个问题在这里已经有答案了 众所周知 String是不可变的 String不可变的原因是什么以及引入字符串生成器类是可变的 不可变类型的实例本质上是线程安全的 因为没有线程可以修改它 所以消除了线程以干扰另一个线程的方式修改它的风险 引用本
  • Maven EJB 打包及依赖库

    我面临一个问题 如何使用 JBoss7 应用程序服务器的简单 WAR 和 EJB3 模块正确打包我的企业 EAR 应用程序 问题是 EJB 模块正在使用 XML RPC 库 来自 Apache 但我仍然得到NoDefClassFound 此
  • 浏览器中的 3D 可视化

    我正在寻找网络浏览器中 3D 可视化的解决方案 现在我只需要对这个主题进行研究 即我需要知道存在多少种解决方案 其中哪些是好的 为什么 Thanks 网络上 3D 的简要概述 VRML 一种用于 3D 模型的 HTML 风格标记语言 被认为
  • Delphi XE2 TurboPower 组件状态

    TurboPower 组件是最流行的商业组件库之一 并且在开源后仍然被许多 Delphi 开发人员使用 我不想单独询问 而是想问一个关于每个组件的 XE2 兼容性状态的问题 主要有 TurboPower Abbrvia AsyncPro 和
  • 通过对组内的列进行排序来重新排列数据框

    执行以下任务的好方法是什么 我有一个数据框 例如 v2 lt c 4 5 2 5 3 5 5 5 7 5 6 5 2 5 1 5 3 5 v1 lt c 2 2 3 2 1 2 4 2 2 2 3 2 2 2 1 2 5 2 lvl lt
  • 如何实现保存/加载功能?

    我正在尝试为 Windows 窗体应用程序实现加载 保存功能 我有以下组件 树视图 几个列表视图 几个文本框 几个对象 包含一个大字典列表 我想实现一种将所有这些保存到文件中的方法 并稍后恢复 加载它 最好的方法是什么 我认为 XML 序列
  • UIViewController 子类所需的初始值设定项

    我一直在尝试遵循有关创建容器视图控制器的教程 它是在 Objective C 中 我想将其转换为 Swift 我在这里发现了一些相同的问题 但我没有从中得到太多 这是代码 import UIKit class ContainerViewCo
  • PyQt 进度条直到 100% 才会更新或显示

    EDIT PyQt4 进度条上有许多类似的帖子没有更新 他们都关注线程问题以及程序实际更新窗口的位置 虽然很有帮助 但我的代码结构过于结构化 以至于回复不切实际 这里给出的公认答案很简单 切中要点并且有效 我在 Win 7 x64 机器上使
  • if else 概念在功能文件(Gherkin 语言)中可用吗?

    无论如何 我们可以在功能文件中使用 if else 概念吗 例如 Scenario User should be able to check login page Given I am on login page When I click
  • Chrome 中的 Azure 无限重定向循环

    我有一个 MVC5 Azure 网站 昨晚运行良好 现在 当尝试通过 chrome 登录时 它似乎陷入了无限重定向循环 它在 Edge 和 FireFox 上运行良好 它使用 Azure AD 进行身份验证 重定向从主站点到login mi
  • 在 WebAPI 控制器中序列化 EF Code First 5.0 数据时出错

    我最初问过这个问题 如何解决 指定的包含路径无效 已回答 我的 Include 现在正在工作 但是 当序列化器尝试工作时 它很神奇 我收到以下错误 You must write an attribute type object after
  • Android中使用MediaPlayer播放mp3文件列表

    我在 Android 中使用 MediaPlayer 重现多个 mp3 文件时遇到问题 我能够复制一个文件 但我没有找到任何有用的东西来逐个复制不同的文件 我现在用来重现一个文件的代码是 public MediaPlayer mediaPl
  • 使用 jquery 禁用输入 type="image" 的正确方法是什么?

    使用 jQuery 我尝试禁用这样的输入字段
  • 从两个字符串中获取编辑

    我将深入探讨我的问题 如果您不想阅读所有内容 可以跳至 TL DR 我正在尝试做什么 我需要存储一个 文件 文本文件 可以由用户编辑 如果我有原始文件 这可能是巨大的 Lorem ipsum dolor 坐 amet 用户要进行更改 Foo