【工具集】【前端】【JS】html标签过长高亮显示_html 文本过长显示事件js-CSDN博客

本文链接：https://blog.csdn.net/u012549626/article/details/90260383

1.序

2.功能

3.具体实现

1.序

写作缘由，编写工具集，方便日后使用。

2.功能

输入html标签字符串，然后进行过长处理，高亮显示在页面上

3.具体实现

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/index.js" ></script>
		<style type="text/css">
			.common-identify {
				color: red;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<span id="result">test</span>
	</body>
</html>

index.js

window.onload=function(){
	let original = "<span class='common-identify'>2</span>1028219800930<span class='common-identify'>7</span>618"
	original = "<span class='common-identify'>王</span>安安苏大大撒旦<span class='common-identify'>啊</span>爱谁在"
	original = "爱上大大大大打扫打扫打扫打扫打扫大"
	let className = "common-identify"
	document.getElementById("result").innerHTML = _stringTooLongDeal(original, 5, className)
}


function _stringTooLongDeal(original, length, className) {
	if(original !== undefined && original !== null) {
		let spanStart = `<span class='${className}'>`
		let spanEnd = '</span>'
		let newArray = []
		while(original.length > 0) {
			let startIndex = original.indexOf(spanStart)
			let endIndex = 0
			let item = ''
			
			if (startIndex === 0) {
				endIndex = original.indexOf(spanEnd) + spanEnd.length
				item = original.substring(startIndex, endIndex)
			} else if (startIndex > 0) {
				endIndex = startIndex
				item = original.substring(0, endIndex)
			} else {
				item = original
				original = ''
			}
			
			newArray.push(item)
			original = original.substring(endIndex, original.length)
		}
		
		let count = 0
		let returnStr = ''
		for(let item of newArray){
			if (item.indexOf(spanEnd) !== -1) {
				if (count < length) {
					returnStr += item
					++count
				}
			} else {
				if (count < length && (count + item.length) < length) {
					returnStr += item
					count += item.length
				} else if (count < length && (count + item.length) > length) {
					returnStr += item.substr(0, length - count)
					returnStr += '...'
					count = length
				} else {
					return returnStr
				}
			}
		}

		return returnStr
	}
}

页面显示