htmldiff-javascript
TypeScript icon, indicating that this package has built-in type declarations

0.0.5 • Public • Published

htmldiff-javascript

Diffs two HTML blocks, and returns a meshing of the two that includes <ins> and <del> elements. The classes of these elements are ins.diffins for new code, del.diffdel for removed code, and del.diffmod and ins.diffmod for sections of code that have been changed.

For "special tags" (primarily style tags such as <em> and <strong>), ins.mod elements are inserted with the new styles.

Typescript port of htmldiff.net.

Fork of htmldiff-js. With the following changes:

  1. Typescript
  2. Expose options from the HTMLDiff class

Installation

npm install htmldiff-javascript

Usage

<html>
	<body>
		<div id="oldHtml">
			<p>Some <em>old</em> html here</p>
		</div>

		<div id="newHtml">
			<p>Some <b>new</b> html goes here</p>
		</div>

		<div id="diffHtml"></div>
	</body>
</html>
import HtmlDiff from 'htmldiff-javascript'

let oldHtml = document.getElementById('oldHtml')
let newHtml = document.getElementById('newHtml')
let diffHtml = document.getElementById('diffHtml')

diffHtml.innerHTML = HtmlDiff.execute(oldHtml.innerHTML, newHtml.innerHTML)

TODOs

  • [x] Convert everything to typescript
  • [ ] Add tests
  • [ ] Setup Publishing Pipeline

Readme

Keywords

none

Package Sidebar

Install

npm i htmldiff-javascript

Weekly Downloads

21

Version

0.0.5

License

MIT

Unpacked Size

71.2 kB

Total Files

15

Last publish

Collaborators

  • jibin2706