devbox
寸_铁
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

js比较文本内容_js比较span中内容是否一致

作者：寸_铁 | 2024-07-07 22:26:44

赞

踩

js比较span中内容是否一致

比较两段文本内容的差异，网上都没有合适的算法，只能自己写了

，效果如下图 

  1. <html>
  2. 	<head>
  3. 		<meta charset="UTF-8">
  4. 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. 		<meta http-equiv="X-UA-Compatible" content="ie=edge">
  6. 		<title></title>
  7. 	</head>
  8. 	<body>
  9. 		文本1<br>
  10. 		<textarea id="text1" cols="100" rows="10">张三李四</textarea><br>
  11. 		文本2<br>
  12. 		<textarea id="text2" cols="100" rows="10">李四张三张三</textarea><br>
  13. 		<button type="button" onclick="compare()">比对</button><br><br>
  14. 		结果1<br>
  15. 		<pre id="result1"></pre>
  16. 		结果2<br>
  17. 		<pre id="result2"></pre>
  18. 		
  19. 		<script type="text/javascript">
  20. 			function compare() {
  21. 				// 获取要比对的文本
  22. 				let text1 = document.getElementById('text1').value;
  23. 				let text2 = document.getElementById('text2').value;
  24. 				
  25. 				// 进行比对
  26. 				let {result1, result2} = getHighlight(text1, text2);
  27. 				
  28. 				// 渲染比对结果
  29. 				document.getElementById('result1').innerHTML = result1;
  30. 				document.getElementById('result2').innerHTML = result2;
  31. 			}
  32. 			
  33. 			/**
  34. 			 * 获取高亮文本
  35. 			 *
  36. 			 * @param text1 文本1
  37. 			 * @param text2 文本2
  38. 			 * @param highlightBefore 高亮前缀
  39. 			 * @param highlightAfter 高亮后缀
  40. 			 * @return {result2: string, result1: string} 高亮后的字符串
  41. 			 */
  42. 			function getHighlight(text1, text2, highlightBefore, highlightAfter) {
  43. 				// 初始化高亮文本
  44. 				highlightBefore = highlightBefore ? highlightBefore : '<span style="color:red;">';
  45. 				highlightAfter = highlightAfter ? highlightAfter : '</span>';
  46. 			
  47. 				// 字符数组
  48. 				let char1s = [];
  49. 				let char2s = [];
  50. 				// 偏移量
  51. 				let char2Index = 0;
  52. 			
  53. 				// 初始化字符数组对象
  54. 				for (let i in text1) {
  55. 					char1s.push({
  56. 						value: text1[i],
  57. 						highlight: false
  58. 					});
  59. 				}
  60. 				for (let i in text2) {
  61. 					char2s.push({
  62. 						value: text2[i],
  63. 						highlight: false
  64. 					});
  65. 				}
  66. 			
  67. 				for (let i = 0; i < char1s.length; i++, char2Index++) {
  68. 					console.log(i, char2Index);
  69. 					// 如果文本1结尾有东西
  70. 					if (char2Index > char2s.length - 1) {
  71. 						char1s[i].highlight = true;
  72. 						continue;
  73. 					}
  74. 			
  75. 					let char1 = char1s[i].value;
  76. 					let char2 = char2s[char2Index].value;
  77. 					console.log(`char1: ${char1}, char2: ${char2}`);
  78. 					// 如果字符相等
  79. 					if (char1 === char2) {
  80. 						continue;
  81. 					}
  82. 			
  83. 					/**
  84. 					 * 初始化比对粒度
  85. 					 *
  86. 					 * 如果连续3个一样的字符，就说明比对成功
  87. 					 * 比对粒度太大，细小的部分可能比对不出来
  88. 					 * 比对粒度太小，重复率高的话容易被比对出来，容易比对错
  89. 					 * 正常调成3就够了，除非重复率特别高的，可以往上调，但建议不超过5
  90. 					 * 最低也不要低于2，不可调成1，否则只要有一个字符一样的，就会被识别出来
  91. 					 */
  92. 					let granularity;
  93. 					if (char1s.length < 10) {
  94. 						granularity = 2;
  95. 					} else if (char1s.length < 1000) {
  96. 						granularity = 3;
  97. 					} else if (char1s.length < 100000) {
  98. 						granularity = 4;
  99. 					} else {
  100. 						granularity = 5;
  101. 					}
  102. 			
  103. 					// 快到结尾时调小比对粒度
  104. 					if (i > char1s.length - granularity) {
  105. 						granularity = char1s.length - i;
  106. 						console.log('修改比对粒度', granularity);
  107. 					}
  108. 			
  109. 					// 如果剩余长度小于比对粒度，则不进行比对
  110. 					if (char1s.length - i < granularity) {
  111. 						break;
  112. 					}
  113. 			
  114. 					// 用来判断是否找到一样的
  115. 					let end = -1;
  116. 			
  117. 					// 进行循环比对
  118. 					// j: 从char2s的哪个索引开始比对
  119. 					for (let j = char2Index + 1; j < char2s.length - granularity + 1; j++) {
  120. 						// 比对factor个
  121. 						let equals = true;
  122. 						for (let k = j, offset = 0; k < j + granularity; k++, offset++) {
  123. 							console.log('第' + offset + '次比对', char1s[i + offset].value, char2s[k].value, i + offset, k);
  124. 							if (char1s[i + offset].value !== char2s[k].value) {
  125. 								equals = false;
  126. 								break;
  127. 							}
  128. 						}
  129. 			
  130. 						// 如果相等，结束比对
  131. 						if (equals) {
  132. 							end = j;
  133. 							console.log('比对成功, end=' + end + ', 比对粒度' + granularity);
  134. 							break;
  135. 						} else {
  136. 							console.log('比对失败, 比对粒度' + granularity);
  137. 						}
  138. 					}
  139. 					console.log('比对结束，end=' + end);
  140. 			
  141. 					// 如果找到了
  142. 					if (end !== -1) {
  143. 						for (let k = char2Index; k < end; k++) {
  144. 							char2s[k].highlight = true;
  145. 							char2Index++;
  146. 							console.log('设置高亮', char2s[k]);
  147. 						}
  148. 					}
  149. 			
  150. 					// 如果没找到，就让自己高亮
  151. 					else {
  152. 						char1s[i].highlight = true;
  153. 						char2Index--;
  154. 						console.log('找不到' + char1);
  155. 					}
  156. 				}
  157. 			
  158. 				// 遍历最后多出来的文本2，全部高亮
  159. 				for (let i = char2Index; i < char2s.length; i++) {
  160. 					char2s[i].highlight = true;
  161. 				}
  162. 			
  163. 				// 将字符数组对象转换成高亮形式
  164. 				let result1 = char1s.map(char => char.highlight ? highlightBefore + char.value + highlightAfter : char.value).join('');
  165. 				let result2 = char2s.map(char => char.highlight ? highlightBefore + char.value + highlightAfter : char.value).join('');
  166. 				return {result1, result2};
  167. 			}
  168. 		</script>
  169. 	</body>
  170. </html>

另外提供了Java版本，算法是一样的，翻译过来的而已

Char.java

  1. /**
  2.  * 用于描述一个字符
  3.  */
  4. class Char {
  5. 	/**
  6. 	 * 字符
  7. 	 */
  8. 	private Character value;
  9.  
  10. 	/**
  11. 	 * 高亮
  12. 	 */
  13. 	private Boolean highlight;
  14.  
  15. 	public Char(Character value) {
  16. 		this.value = value;
  17. 		this.highlight = false;
  18. 	}
  19.  
  20. 	public Character getValue() {
  21. 		return value;
  22. 	}
  23.  
  24. 	public void setValue(Character value) {
  25. 		this.value = value;
  26. 	}
  27.  
  28. 	public Boolean getHighlight() {
  29. 		return highlight;
  30. 	}
  31.  
  32. 	public void setHighlight(Boolean highlight) {
  33. 		this.highlight = highlight;
  34. 	}
  35.  
  36. 	@Override
  37. 	public String toString() {
  38. 		return "Char{" +
  39. 				"value=" + value +
  40. 				", highlight=" + highlight +
  41. 				'}';
  42. 	}
  43. }

CompareResult.java

  1. /**
  2.  * 比对结果
  3.  *
  4.  * @author 猴哥
  5.  */
  6. public class CompareResult {
  7. 	/**
  8. 	 * 结果1
  9. 	 */
  10. 	private String result1;
  11.  
  12. 	/**
  13. 	 * 结果2
  14. 	 */
  15. 	private String result2;
  16.  
  17. 	public CompareResult(String result1, String result2) {
  18. 		this.result1 = result1;
  19. 		this.result2 = result2;
  20. 	}
  21.  
  22. 	public String getResult1() {
  23. 		return result1;
  24. 	}
  25.  
  26. 	public void setResult1(String result1) {
  27. 		this.result1 = result1;
  28. 	}
  29.  
  30. 	public String getResult2() {
  31. 		return result2;
  32. 	}
  33.  
  34. 	public void setResult2(String result2) {
  35. 		this.result2 = result2;
  36. 	}
  37.  
  38. 	@Override
  39. 	public String toString() {
  40. 		return "CompareResult{" +
  41. 				"result1='" + result1 + '\'' +
  42. 				", result2='" + result2 + '\'' +
  43. 				'}';
  44. 	}
  45. }

 CompareUtil.java

  1. import java.util.Arrays;
  2. import java.util.Optional;
  3. import java.util.stream.Collectors;
  4.  
  5. /**
  6.  * 比较字符串工具类
  7.  *
  8.  * @author 猴哥
  9.  */
  10. public class CompareUtil {
  11. 	private CompareUtil() {}
  12.  
  13. 	/**
  14. 	 * 获取高亮文本
  15. 	 *
  16. 	 * @param text1           文本1
  17. 	 * @param text2           文本2
  18. 	 * @param highlightBefore 高亮前缀
  19. 	 * @param highlightAfter  高亮后缀
  20. 	 * @return 高亮后的字符串
  21. 	 */
  22. 	public static CompareResult compare(String text1, String text2, String highlightBefore, String highlightAfter) {
  23. 		// 判断非空
  24. 		text1 = Optional.ofNullable(text1).orElse("");
  25. 		text2 = Optional.ofNullable(text2).orElse("");
  26.  
  27. 		// 字符数组
  28. 		Char[] char1s = new Char[text1.length()];
  29. 		Char[] char2s = new Char[text2.length()];
  30. 		// 偏移量
  31. 		int char2Index = 0;
  32.  
  33. 		// 初始化字符数组对象
  34. 		for (int i = 0; i < text1.length(); i++) {
  35. 			char1s[i] = new Char(text1.charAt(i));
  36. 		}
  37. 		for (int i = 0; i < text2.length(); i++) {
  38. 			char2s[i] = new Char(text2.charAt(i));
  39. 		}
  40.  
  41. 		for (int i = 0; i < char1s.length; i++, char2Index++) {
  42. 			// 如果文本1结尾有东西
  43. 			if (char2Index > char2s.length - 1) {
  44. 				char1s[i].setHighlight(true);
  45. 				continue;
  46. 			}
  47.  
  48. 			char char1 = char1s[i].getValue();
  49. 			char char2 = char2s[char2Index].getValue();
  50. 			System.out.println("char1: " + char1 + ", char2: " + char2);
  51. 			// 如果字符相等
  52. 			if (char1 == char2) {
  53. 				continue;
  54. 			}
  55.  
  56. 			/*
  57. 			 * 初始化比对粒度
  58. 			 *
  59. 			 * 如果连续3个一样的字符，就说明比对成功
  60. 			 * 比对粒度太大，细小的部分可能比对不出来
  61. 			 * 比对粒度太小，重复率高的话容易被比对出来，容易比对错
  62. 			 * 正常调成3就够了，除非重复率特别高的，可以往上调，但建议不超过5
  63. 			 * 最低也不要低于2，不可调成1，否则只要有一个字符一样的，就会被识别出来
  64. 			 */
  65. 			int granularity;
  66. 			if (char1s.length < 10) {
  67. 				granularity = 2;
  68. 			} else if (char1s.length < 1000) {
  69. 				granularity = 3;
  70. 			} else if (char1s.length < 100000) {
  71. 				granularity = 4;
  72. 			} else {
  73. 				granularity = 5;
  74. 			}
  75.  
  76. 			// 快到结尾时调小比对粒度
  77. 			if (i > char1s.length - granularity) {
  78. 				granularity = char1s.length - i;
  79. 				System.out.println("修改比对粒度: " + granularity);
  80. 			}
  81.  
  82. 			// 如果剩余长度小于比对粒度，则不进行比对
  83. 			if (char1s.length - i < granularity) {
  84. 				break;
  85. 			}
  86.  
  87. 			// 用来判断是否找到一样的
  88. 			int end = -1;
  89.  
  90. 			// 进行循环比对
  91. 			// j: 从char2s的哪个索引开始比对
  92. 			for (int j = char2Index + 1; j < char2s.length - granularity + 1; j++) {
  93. 				// 比对factor个
  94. 				boolean equals = true;
  95. 				for (int k = j, offset = 0; k < j + granularity; k++, offset++) {
  96. 					System.out.println("第" + offset + "次比对 " + char1s[i + offset].getValue() + " " + char2s[k].getValue() + " " + (i + offset) + " " + k);
  97. 					if (!char1s[i + offset].getValue().equals(char2s[k].getValue())) {
  98. 						equals = false;
  99. 						break;
  100. 					}
  101. 				}
  102.  
  103. 				// 如果相等，结束比对
  104. 				if (equals) {
  105. 					end = j;
  106. 					System.out.println("比对成功, end=" + end + ", 比对粒度" + granularity);
  107. 					break;
  108. 				} else {
  109. 					System.out.println("比对失败, 比对粒度" + granularity);
  110. 				}
  111. 			}
  112. 			System.out.println("比对结束，end=" + end);
  113.  
  114. 			// 如果找到了
  115. 			if (end != -1) {
  116. 				for (int k = char2Index; k < end; k++) {
  117. 					char2s[k].setHighlight(true);
  118. 					char2Index++;
  119. 					System.out.println("设置高亮" + char2s[k]);
  120. 				}
  121. 			}
  122.  
  123. 			// 如果没找到，就让自己高亮
  124. 			else {
  125. 				char1s[i].setHighlight(true);
  126. 				char2Index--;
  127. 				System.out.println("找不到" + char1);
  128. 			}
  129. 		}
  130.  
  131. 		// 遍历最后多出来的文本2，全部高亮
  132. 		for (int i = char2Index; i < char2s.length; i++) {
  133. 			char2s[i].setHighlight(true);
  134. 		}
  135.  
  136. 		// 初始化高亮前缀、后缀
  137. 		final String before = Optional.ofNullable(highlightBefore).orElse("<span style=\"color:red;\">");
  138. 		final String after = Optional.ofNullable(highlightAfter).orElse("</span>");
  139.  
  140. 		// 将字符数组对象转换成高亮形式
  141. 		String result1 = Arrays.stream(char1s)
  142. 				.map(char1 -> char1.getHighlight() ? before + char1.getValue() + after : char1.getValue() + "")
  143. 				.collect(Collectors.joining());
  144. 		String result2 = Arrays.stream(char2s)
  145. 				.map(char2 -> char2.getHighlight() ? before + char2.getValue() + after : char2.getValue() + "")
  146. 				.collect(Collectors.joining());
  147. 		return new CompareResult(result1, result2);
  148. 	}
  149. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/796943
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。