用JavaScript实现截取指定长度的HTML字符串

最新推荐文章于 2024-06-14 16:57:47 发布

原创最新推荐文章于 2024-06-14 16:57:47 发布 · 614 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #JavaScript #ViewUI

js & css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种处理HTML字符串的方法，确保字符串被截断时不会出现未闭合的标签。通过定位并调整字符串中的标签位置，可以有效避免显示不完整的问题。文章提供了具体的实现算法，并解释了如何处理位于标签属性或内容中的截断位置。

       /*   
        * 调整截取的字符串的位置。因为在截取一个字符串后可能存在两种情况：
        * （1）字符串末位正好处于一个标签的属性之中的某个位置。如：<a id="xxx"  href="xxx"
></a>中红色标注的位置。
        * （2）字符串末位处于一个标签内容之中的某个位置。如：<a
>here
</a> 中红色标注的位置。
        *  对于这两种情况，第二种情况可以无需特殊处理，但是第一种情况的话得将整个标签删除或者将其属性补全。删除的话
        *  将字符串的末尾位置前移至标签开始之前；而补全则是将末尾位置后移至次标签的'>'处。这里采用的是删除的方法。
        */
	function adjustByTagPostion(str){
		var left_brace_index = str.lastIndexOf('<');
		var right_brace_index = str.lastIndexOf('>');
		// 为true的话则表示字符串处于第一种情况，需要进行删除操作。
               var inTagDefinition = left_brace_index > right_brace_index;
		return inTagDefinition ? str.substring(0,left_brace_index) : str;
	}

	// 将未闭合的标签按序闭合。
	function modifyDisplayString(original, addTags){
		var tagLenth = addTags.length;
		for(var i = tagLenth-1; i >= 0; i--){
			original += '</' + addTags[i] + '>';
		}
		return original;
	}

	// 
	function splitString(original, length){
               // 此数组用于保存那些未闭合的标签。
		var non_match_tag = []
               // 如果大于字符串的总长度，返回整个字符串；否则返回指定长度的子串
 		var to = length >= original.length ? original.length : length;
		var substring = original.substring(0,to);

               // 调整字符串。
		adjustedSubString = adjustByTagPostion(substring);
		var tag_pattern = /<\s*(\w+\b)(?:[^>]*[^\/])?>|<(\/\w+)>/ig

		adjustedSubString.replace(tag_pattern, function(match,$1,$2){
			var value = $1 == '' ? ($2 == '' ? '' : $2) : $1;
			if(value.charAt(0) == '/'){
                               // 为真表示这个标签是前面最后一个为闭合标签的闭合，因此，将此标签从数组中删除。
 				if(non_match_tag.length > 0 && non_match_tag[non_match_tag.length-1] == value.substring(1)){
					non_match_tag.pop();
				}
			}else{
                               // 新的未闭合的标签，将其添加到数组中。
				non_match_tag.push(value);
			}
               });

		return modifyDisplayString(adjustedSubString, non_match_tag);
	}