Simple string diffing. Given two strings, striff will return an object noting which characters were added or removed, and at which indices

Overview

striff

Bundle Size

Simple string diffing. Given two strings, striff will return an object noting which characters were added or removed, and at which indices.

Installation

Run npm install striff. Or stick in on a page via CDN.

Usage

Import it, pass a couple of strings, and do whatever you want with the results.

import striff from "striff";

const result = striff("string #1", "string #2");

// {
//   added: [
//     ...added characters
//   ],
//   removed: [
//     ...removed characters
//   ]
// }

Examples

Here's the kind of result you'll get with different types of diffing.

Strings w/ Characters Added

Input

const str1 = "abc";
const str2 = "abcde";

const result = striff(str1, str2);

Result

{
  added: [
    {
      character: "d",
      index: 3
    },
    {
      character: "e",
      index: 4
    }
  ],
  removed: []
}

Strings w/ Characters Removed

Input

const str1 = "abc";
const str2 = "a";

const result = striff(str1, str2);

Result

{
    added: [],
    removed: [
    {
      character: "b",
      index: 1
    },
    {
      character: "c",
      index: 2
    }
  ]
}

Strings w/ Duplicate Characters

Handling strings with duplicate, consecutive characters removed is a little weird. For strings whose characters were changed at the end, the indices will be grouped together at the end of the string.

Input

const str1 = "abbbc";
const str2 = "ab";

const result = striff(str1, str2);

Result

{
  added: [],
  removed: [
    {
      character: "b",
      index: 2
    },
    {
      character: "b",
      index: 3
    },
    {
      character: "c",
      index: 4
    }
  ]
}

For those whose whose characters were changed at the beginning, the indices will be grouped together at the beginning.

Input

const str1 = "abbbc";
const str2 = "bc";

const result = striff(str1, str2);

Result

{
  added: [].
  removed: [
    {
      character: "a",
      index: 0
    },
    {
      character: "b",
      index: 1
    },
    {
      character: "b",
      index: 2
    }
  ]
}

Feedback or Contributions

Make an issue or a pull request!

You might also like...

Zero Two Bot,A fully Modular Whatsapp Bot to do everything possible in WhatsApp by Team Zero Two

Zero Two Bot,A fully Modular Whatsapp Bot to do everything possible in WhatsApp by Team Zero Two

🍭 𝗭𝗲𝗿𝗼 π—§π˜„π—Ό 𝗠𝗗 🍭 A Moduler WhatsApp Bot designed for both PM and Groups - To take your boring WhatsApp usage into a whole different level. T

Dec 25, 2022

Construct ANSI colors strings from object descriptors.

ansi-construct Construct ANSI colors strings from object descriptors. Usage import { ansi } from 'ansi-construct' const item = ansi({ text: 'foo', co

Sep 8, 2022

Given an object and a property, replaces a property descriptor (or deletes it), and returns a thunk to restore it.

Given an object and a property, replaces a property descriptor (or deletes it), and returns a thunk to restore it.

Given an object and a property, replaces a property descriptor (or deletes it), and returns a thunk to restore it.

Apr 20, 2022

A JavaScript object getter and setter with string literals ⚑

objectio (object + io) A JavaScript object getter and setter with string literals ⚑ Usage import { get, set } from 'objectio'; const obj = { a: 1,

Sep 14, 2022

A single-page application that allows users to keep track of their books. Users can add the book details (book title and author) and also, and the books can also be removed. Built with JavaScript, HTML, and CSS

Project Name Awesome book with ES6 Description the project. This is a single page application that allows users to keep track of their books. Users ca

Oct 13, 2022

A simple To-do app project made using JavaScript ES6 and Webpack - Microverse. You can add, remove, check tasks, and remove all the tasks that were done at the same time. Feel free to see the live version, if you like it please give it a star!

To Do List a to do list javascript app buit using webpack and es6. Built With HTML CSS JavaScript Wepack Live Demo (if available) Live Demo Link Getti

Dec 17, 2022

Lightweight ( 2.3kB gzipped) and performant natural sorting of arrays and collections by differentiating between unicode characters, numbers, dates, etc.

fast-natural-order-by Lightweight ( 2.3kB gzipped) and performant natural sorting of arrays and collections by differentiating between unicode charac

Nov 14, 2022

A single-page application that allow users to add their To Do items. The items could be checked as completed and the completed task can be removed. Built with JavaScript, HTML and CSS

To Do list Application This is a single page application that allows users to keep track of their tasks. Users can add the task and also check the che

Oct 14, 2022

Instagram clone based on Demon slayer characters βš”οΈ

Instagram clone based on Demon slayer characters βš”οΈ

Instagram clone based on Demon slayer characters πŸ’‘ - About this project You must sign in with google to be able to like and comment on the demon slay

Nov 8, 2022
Comments
  • Possible diff issues

    Possible diff issues

    Hi, I've been finding string diff libraries exactly like this one for a while. Thanks a lot!

    While trying this lib I found the following problem:

    Given

    const s1 = `
    xxx
    22
    111
    `
    const s2 = `
    xxx
    2222
    111
    `
    

    striff(s1, s2) will return { "removed": [], "added": [] }.

    Moreover, tweaking the middle line in s2 (e.g 12112222) will produce many other weird outputs as well.

    Expected behavior

    Only if s1 === s2 should both removed and added be empty?

    Reproduction

    https://codesandbox.io/s/proud-frog-0563ni?file=/src/index.js

    opened by yue4u 1
  • Make it smaller?

    Make it smaller?

    Hi,

    I read your code and congrats, there are very interesting tricks used here to make your diff algorithm.

    I have also worked on diffing a while ago, and found that the most efficient (in term of size and execution speed) seemed to be Myer's diff algorithm: https://blog.robertelder.org/diff-algorithm/

    I minified and golfed it and reached a size of 406 bytes (without gzip): http://xem.github.io/miniDiff/

    So this is not really an issue, but if you're intersted to make your code shorter, this could be an idea.

    Cheers, Max

    opened by xem 1
Releases(v1.0.5)
  • v1.0.4(May 16, 2022)

    • Changes the way two strings hold reference to matched characters.
    • Fixes a bug causing incorrect diffs for a particular pattern of string(s) (Issue #8).
    Source code(tar.gz)
    Source code(zip)
  • v1.0.3(May 8, 2022)

  • v1.0.2(Mar 24, 2022)

    When strings contained regex operators (like question marks), an exception was occurring because they weren't property escaped. This fixes that.

    What's Changed

    • Properly escape strings before converting to RegExp pattern. by @alexmacarthur in https://github.com/alexmacarthur/striff/pull/6

    Full Changelog: https://github.com/alexmacarthur/striff/compare/v1.0.1...v1.0.2

    Source code(tar.gz)
    Source code(zip)
  • v1.0.1(Mar 22, 2022)

    Unexpected diffing was occurring for strings that involved the same character being used multiple times (like "wow"). This release fixes that issue.

    Source code(tar.gz)
    Source code(zip)
  • v1.0.0(Mar 20, 2022)

    After attempting to figure out some weird results in certain circumstances, I ended totally rewriting the algorithm I was using, and ended up cutting a ton of weight from the package along the way. Excited about this one.

    Source code(tar.gz)
    Source code(zip)
  • v0.0.5(Mar 16, 2022)

  • v0.0.3(Mar 10, 2022)

Owner
Alex MacArthur
Most exceptional Enneagram #3.
Alex MacArthur
A simple code that creates a string of random characters displayed in an html object, all saving in a json file.

I'm 17 Years Old Developer / Lead Developer. ?? I'm wroking on AdrenalinaRP, GrandRDM. ?? I’m currently learning JavaScript. ?? I’m looking to collabo

OFFVIXEN 2 Nov 17, 2022
A simple application used to organize your day to day activity. Tasks can be added and removed from this list.

Minimalist ToDo List A minimalist list of TODOs. Built With HTML, CSS, JavaScript Webpack Jest NPM Node Getting Started In order to obtain a local cop

Eva Lavinia Bucur 10 Sep 9, 2022
Todo-List is an online website where users can add a todo tasks. tasks can be removed , added, and edited. Built with Webpack and JavaScript.

To-do List Description To-do-list is an online website where users can add a todo tasks. tasks can be removed , added, and edited.Built with Webpack a

tarike bouari 9 Sep 9, 2022
Awesome-book is an online library website where a user can store a collection of books. Different book can be added and removed. Built with JavaScript using Dom

Awesome-book Description Awesome-book is an online library website where a user can store a collection of books. Differents book can be added and remo

tarike bouari 8 Sep 9, 2022
A lightweight JavaScript library that renders text in a brilliant style by displaying strings of random characters before the actual text.

cryptoWriter.js A lightweight javascript library which creates brilliant text animation by rendering strings of random characters before the actual te

Keshav Bajaj 2 Sep 13, 2022
Fix for Object.keys, which normally just returns an array of strings, which is not good when you care about strong typing

Welcome to ts-object-keys ?? Fix for Object.keys, which normally just returns an array of strings, which is not good when you care about strong typing

Funtal Foundation 1 Jul 4, 2022
Simple utils to pack arrays, objects and strings to a flat object (and back again).

packrup Simple utils to pack (and unpack) arrays and strings to a flat object. Status: In Development Please report any issues ?? Made possible by my

Harlan Wilton 15 Dec 23, 2022
BookStore is a website that allows a given user to view a list of books, to add a new book and remove a given book.

Project Name : BookStore CMS BookStore is a website that allows a given user to view a list of books, to add a new book and remove a given book. In or

Chris Siku 10 Aug 22, 2022
Convert some JavaScript/TypeScript code string into a .d.ts TypeScript Declaration code string

convert-to-dts Converts the source code for any .js or .ts file into the equivalent .d.ts code TypeScript would generate. Usage import { convertToDecl

Lily Scott 11 Mar 3, 2022