按钮button class=btn btn-primary onclick=checkSimilarity检测相似度button!DOCTYPE html上下间距20px样式优化htmlhead title文章相似度检测title meta charset=UTF-8 link rel=stylesheet href=httpscdnbootcsscombootstrap337cssbootst
<html>
<head>
<title>文章相似度检测</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0-release/echarts.min.js"></script>
<style type="text/css">
textarea {
width: 100%;
height: 200px;
font-size: 16px;
color: #333;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
}
h2 {
font-size: 24px;
color: #333;
margin-bottom: 20px;
}
.result {
font-size: 16px;
color: #333;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
background-color: #f7f7f7;
}
.chart {
margin-top: 20px;
height: 300px;
width: 100%;
}
.btn {
margin-top: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>文章相似度检测</h2>
<div class="row">
<div class="col-md-6">
<h3>原文</h3>
<textarea id="original_text"></textarea>
</div>
<div class="col-md-6">
<h3>对比文</h3>
<textarea id="compare_text"></textarea>
</div>
</div>
<button class="btn btn-primary" onclick="checkSimilarity()">检测相似度</button>
<div id="result" class="result"></div>
<div id="chart" class="chart"></div>
</div>
<script type="text/javascript">
// 检测相似度函数
function checkSimilarity() {
// 获取原文和对比文本
var original_text = $('#original_text').val();
var compare_text = $('#compare_text').val();
<pre><code> // 去除空格、换行符、制表符以外的特殊字符
original_text = original_text.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, "").replace(/\s/g, "");
compare_text = compare_text.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, "").replace(/\s/g, "");
// 检查输入是否为空或过长
if (original_text.length == 0 || compare_text.length == 0 || original_text.length > 10000 || compare_text.length > 10000) {
alert("请输入有效文本，输入文本不能超过10000个字符");
return;
}
// 计算相似度
var similarity = 0;
if (original_text == compare_text) {
similarity = 100;
} else {
// 使用余弦相似度算法计算相似度
var originalCount = {};
var compareCount = {};
var sameCount = 0;
var originalLength = original_text.length;
var compareLength = compare_text.length;
for (var i = 0; i < originalLength; i++) {
var c = original_text.charAt(i);
if (!originalCount[c]) {
originalCount[c] = 0;
}
originalCount[c]++;
}
for (var i = 0; i < compareLength; i++) {
var c = compare_text.charAt(i);
if (!compareCount[c]) {
compareCount[c] = 0;
}
compareCount[c]++;
}
var originalVector = [];
var compareVector = [];
var originalVectorLength = 0;
var compareVectorLength = 0;
for (var key in originalCount) {
if (compareCount[key]) {
originalVector.push(originalCount[key]);
compareVector.push(compareCount[key]);
sameCount += originalCount[key] * compareCount[key];
}
originalVectorLength += Math.pow(originalCount[key], 2);
}
for (var key in compareCount) {
compareVectorLength += Math.pow(compareCount[key], 2);
}
similarity = sameCount / (Math.sqrt(originalVectorLength) * Math.sqrt(compareVectorLength)) * 100;
}
// 显示结果
var sameCount = 0;
var diffCount = 0;
var sameRatio = 0;
var originalLength = original_text.length;
var compareLength = compare_text.length;
for (var i = 0; i < originalLength; i++) {
if (original_text.charAt(i) == compare_text.charAt(i)) {
sameCount++;
} else {
diffCount++;
}
}
sameRatio = sameCount / originalLength * 100;
if (sameRatio < 0.01) {
sameRatio = 0.00;
}
var result_text = "相同字符数：" + sameCount + "<br>不同字符数：" + diffCount + "<br>相同字符占比：" + sameRatio.toFixed(2) + "%<br>";
if (similarity == 100) {
result_text += "完全相同，这就是照搬";
} else if (similarity >= 80) {
result_text += "相似度高，可能存在抄袭";
} else if (similarity >= 60) {
result_text += "相似度一般，需要进一步核查";
} else {
result_text += "完全不同，是否做为原创自己定夺";
}
$('#result').html(result_text);
// 使用图表等更加直观的方式展示结果
var chart = echarts.init(document.getElementById('chart'));
var option = {
title: {
text: '文章相似度检测结果',
subtext: '相同字符占比：' + sameRatio.toFixed(2) + '%，相似度：' + similarity.toFixed(2) + '%',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['相同字符数', '不同字符数']
},
series: [
{
name: '文章相似度检测结果',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: sameCount, name: '相同字符数' },
{ value: diffCount, name: '不同字符数' }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
chart.setOption(option);
// 添加图表交互功能
chart.on('mouseover', function(params) {
if (params.componentType == 'series') {
if (params.name == '相同字符数') {
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
});
} else if (params.name == '不同字符数') {
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 1
});
}
}
});
chart.on('mouseout', function(params) {
if (params.componentType == 'series') {
if (params.name == '相同字符数') {
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: 0
});
} else if (params.name == '不同字符数') {
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: 1
});
}
}
});
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/bIJ9 著作权归作者所有。请勿转载和采集!