❤
npm
Sign UpSign In

text-different

1.2.1 • Public • Published

text-different

中文文档

Effect

Compare text differences and generate a difference tree.
text-different-for-html: Provide native methods to display code.
text-different-for-react: Provide React components to display code.

demo

How to use

<script src="text-different/build/text-different.js"></script>
<script>
const oldText = 'Old text';
const newText = 'New text';
 
const tree = textDifferent(oldText, newText);
</script> 

or

import textDifferent from 'text-different'；
const oldText = 'Old text';
const newText = 'New text';
 
const tree = textDifferent(oldText, newText);

Result

After comparing the texts, a text tree is generated, for example:

const tree = [
  {
    status: 0,
    text: 'string'
  },
  {
    status: 1,
    text: 'string'
  },
  {
    status: 2,
    text: 'string'
  },
  {
    status: 3,
    text: [
      {
        status: 0,
        text: 'string'
      },
      {
        status: 1,
        text: 'string'
      },
      {
        status: 2,
        text: 'string'
      },
      {
        status: 0,
        text: 'string'
      }
    ]
  },
  {
    status: 0,
    text: 'string'
  },
]
  • When status is 0, there is no change in the text of the paragraph
  • When status is 1, it means that the text is deleted in the old text.
  • When status is 2, it means that the text is added in the new text.
  • When status is 3, it means that the text is modified in the text, where the text attribute is an array indicating which text in the text is being modified (added, deleted). Each data in the array has the attributes status and text.

Output analysis result

This method only provides a text parsing tree. If you want to output a parsed result, you can view example.

demo

text-different-for-html

Depends on highlightjs, you have to install it.

Sample code

<html>
  <head>
    <link rel="stylesheet" href="highlightjs/styles/xcode.css">
    <link rel="stylesheet" href="text-different/build/style/text-different.css">
  </head>
  <body>
    <div id=root></div>
    <script src="highlightjs/highlight.pack.js"></script> 
    <script src="text-different/build/text-different.js"></script> 
    <script src="text-different/build/text-different-for-html.js"></script> 
    <script>
      const tdfh = new TextDifferentForHtml(
        document.getElementById('root'),   // The dom used to render the display code
        'python'                           // Type of code
      );
      tdfh.render({
        oldCode: 'def func():\n  x = 5',   // Old code
        newCode: 'def func():\n  x = 32',  // New code
        hasLineNumber: true                // Whether to display the line number
      });
    </script> 
  </body>
</html>

Methods

  • TextDifferentForHtml：Initialization class
    parameter：
    • element { Element }：The dom used to render the display code
    • type { string }：Type of code
  • .render { Function }：Rendering code parameter：
    • object：
      • oldCode { string }：Old code
      • newCode { string }：New code

text-different-for-react

Rely on highlightjs,react,react-dom,prop-types, you must install them.

Sample code

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import 'highlightjs/styles/xcode.css';
import 'text-different/build/style/text-different.css';
import TextDifferentForReact from 'text-different/lib/dom/react';
 
ReactDOM.render(
  <TextDifferentForReact type="python"
    oldCode={ 'def func():\n  x = 5' }
    newCode={ 'def func():\n  x = 32' }
  />,
  document.getElementById('root')
);

Parameter

parameter description type
type Type of code string
oldCode Old code string
newCode New code string
hasLineNumber Whether to display the line number boolean

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.2.1
    6
    • latest

Version History

Package Sidebar

Install

npm i text-different

Repository

github.com/duan602728596/text-different

Homepage

github.com/duan602728596/text-different

Weekly Downloads

10

Version

1.2.1

License

MIT

Unpacked Size

66.8 kB

Total Files

20

Last publish

Collaborators

  • duan602728596
Try on RunKit
Report malware