vue中使用jsdiff实现文本差异高亮展示
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
前言
最近的一个vue项目,要用到新旧差异值的比较,最终找到jsdiff这么个模块。
开始
- 安装依赖
npm install jsdiff -s
- 在utils添加diff.js文件
function StringBuffer() {
this.__strings__ = [];
};
StringBuffer.prototype.append = function (str) {
this.__strings__.push(str);
return this;
};
StringBuffer.prototype.appendFormat = function (str) {
for (var i = 1; i < arguments.length; i++) {
var parent = "\\{" + (i - 1) + "\\}";
var reg = new RegExp(parent, "g")
str = str.replace(reg, arguments[i]);
}
this.__strings__.push(str);
return this;
}
StringBuffer.prototype.toString = function () {
return this.__strings__.join('');
};
StringBuffer.prototype.clear = function () {
this.__strings__ = [];
}
StringBuffer.prototype.size = function () {
return this.__strings__.length;
}
//引入diff库
const Diff = require("diff");
export const getHighLightDiff = (oldStr, str) => {
const diff = Diff.diffChars(oldStr, str);
//console.log(diff)
var result = new StringBuffer();
diff.forEach((part) => {
if (part.added) {//文字新增,红色
result.append("<span style='color:red'>");
result.append(part.value);
result.append("</span>");
} else if (part.removed) {//文字删减,灰色删除线
result.append("<del style='color:gray'>");
result.append(part.value);
result.append("</del>");
} else {
result.append(part.value);
}
});
return result;
}
- vue代码
<p v-html="getHighLightDiff(oldstr,str)"></p>
<script>
import { getHighLightDiff } from "@/utils/diff";
export default {
data(){
return{
oldstr:"",
str:""
}
},
methods: {
getHighLightDiff
}
}
</script>
- 效果展示
灰色删除线表示删除的字,红色表示新增的字
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)