wsemi
Version:
A support package for web developer.
113 lines (83 loc) • 3.57 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>examples for domCompareText(diff,diff2html)</title>
<!-- @babel/polyfill已廢棄, 因markmap不支援IE11故不須引用 -->
<script nomodule _src="https://cdn.jsdelivr.net/npm/@babel/polyfill@7.12.1/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/diff@5.1.0/dist/diff.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/diff2html@3.4.34/bundles/css/diff2html.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/diff2html@3.4.34/bundles/js/diff2html.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wsemi@1.7.19/dist/wsemi.umd.js"></script>
</head>
<body style="margin:0px; padding:0px;">
<div style="margin:10px; display:flex;">
<div style="padding-right:5px;">title:</div>
<input id="title" type="text" style="width:100%;" oninput="cmpr()"></input>
</div>
<div style="margin:10px; display:flex;">
<div style="padding-right:5px;">format:</div>
<select id="format" onchange="cmpr()">
<option value="side">side</option>
<option value="line">line</option>
</select>
</div>
<div style="margin:10px; display:flex;">
<textarea id="str1" style="width:100%; height:200px;" oninput="cmpr()"></textarea>
<textarea id="str2" style="width:100%; height:200px;" oninput="cmpr()"></textarea>
</div>
<div style="margin:10px;">
<div id="res"></div>
</div>
<script>
let title='str1->str2'
let str1=`The Way that can be told of is not the eternal Way;
The name that can be named is not the eternal name.
The Nameless is the origin of Heaven and Earth;
The Named is the mother of all things.
Therefore let there always be non-being,
so we may see their subtlety,
And let there always be being,
so we may see their outcome.
The two are the same,
But after they are produced,
they have different names.`
let str2=`The Nameless is the origin of Heaven and Earth;
The named is the mother of all things.
Therefore let there always be non-being,
so we may see their subtlety,
And let there always be being,
so we may see their outcome.
The two are the same,
But after they are produced,
they have different names.
They both may be called deep and profound.
Deeper and more profound,
The door of all subtleties!`
document.querySelector('#title').value=title
document.querySelector('#str1').value=str1
document.querySelector('#str2').value=str2
</script>
<script>
function cmpr(){
// console.log('cmpr')
let ele = document.querySelector('#res')
// console.log('ele', ele)
let title = document.querySelector('#title').value
// console.log('title', title)
let oldText = document.querySelector('#str1').value
// console.log('oldText', oldText)
let newText = document.querySelector('#str2').value
// console.log('newText', newText)
//format
let format = document.querySelector('#format').value
// console.log('format', format)
//domCompareText
let r = wsemi.domCompareText(ele, title, oldText, newText, {format})
// console.log('domCompareText',r)
}
//first cmpr
cmpr()
</script>
</body>
</html>