提取html字符串中特定的文字内容_html 取指定文本后面的内容-优快云博客

本文链接：https://blog.youkuaiyun.com/luckyone1111/article/details/81508686

本文介绍了如何在JavaScript中从包含主标题和不定数量副标题的HTML字符串中，有效地提取不同标签内的文字内容，适用于处理带有<div class='subtitle-area'>结构的复杂字符串。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于业务需要，对于形如“主标题内容<div class='subtitle-area'><bold>副标题1</bold><p>副标题内容1</p></div>”

或者“主标题内容<div class='subtitle-area'><bold>副标题1</bold><p>副标题内容1</p><bold>副标题2</bold><p>副标题内容2</p></div>”

（即附副标题和副标题内容的个数不确定）的html字符串分别提取不同标签里面的内容。

<!DOCTYPE html>
<meta charset=utf-8>
<html>
<head>
	<title>提取html字符串中特定的文字内容</title>
</head>
<body>
</body>
<script type="text/javascript"> 
	var str1="主标题内容<div class='subtitle-area'><bold>副标题1</bold><p>副标题内容1</p></div>";
	var str2="主标题内容<div class='subtitle-area'><bold>副标题1</bold><p>副标题内容1</p><bold>副标题2</bold><p>副标题内容2</p></div>";
	var res=splitStr(str)
	console.log(str)
	console.log(res)	
	function splitStr(str){
		var result=[];
		var ps1=new Array();
		var ps2=new Array();
		var ps3=new Array();
		var ps4=new Array();		
		var index=0;
		searchSubStr(str,"<div class='subtitle-area'>",ps1);
		result[0]=str.substring(0,ps1[0]);
		index++;
		ps1=[];
		searchSubStr(str,"<bold>",ps1);
		searchSubStr(str,"</bold>",ps2)	;			
		searchSubStr(str,"<p>",ps3);
		searchSubStr(str,"</p>",ps4);
		
		for(var i=0; i<ps1.length;i++)
		{
			result[index++]=str.substring(ps1[i]+6,ps2[i]);
			result[index++]=str.substring(ps3[i]+3,ps4[i]);

		}
		return result;
	}
			
	function searchSubStr(str,subStr,ps){
		var pos = str.indexOf(subStr);
		while(pos>-1){
			ps.push(pos);
			pos = str.indexOf(subStr,pos+1);
		}

	}
 
</script>
</html>