导航:首页 > 编程语言 > js格式化html字符串

js格式化html字符串

 发布时间：2025-01-29 18:35:07

① js过滤HTML标签以及空格的思路及代码

代码如下:
function
setContent(str)
{
str
=
str.replace(/</?[^>]*>/g,'');
//去除HTML
tag
str.value
=
str.replace(/[
|
]*n/g,'n');
//去除行尾空白
//str
=
str.replace(/n[s|
|
]*r/g,'n');
//去除多余空行
return
str;
}

测试的时候发现这段代码不能过滤掉网页中空格字符(即：
)。于是自己又改造了一下：
代码如下:
function
removeHTMLTag(str)
{
str
=
str.replace(/</?[^>]*>/g,'');
//去除HTML
tag
str
=
str.replace(/[
|
]*n/g,'n');
//去除行尾空白
//str
=
str.replace(/n[s|
|
]*r/g,'n');
//去除多余空行
str=str.replace(/
/ig,'');//去掉
return
str;
}

恩，我的要求达到了。
现在来稍稍解释一下所用到的三个正则表达吧(需要说明的是，因为自己也是刚刚接触，也许我的解释并不是正确的，仅供参考)：
第一个:/</?[^>]*>/g
在js中正则表达式是以“/”开头的，后面的/g，含义是表示全局模式，意思是在将匹配的模式应用于整个字符串，而不是在第一次匹配上之后就停止匹配了。
</?[^>]*>
这个分开来解释，其中第二个字符“”是一个转移字符，用来转移后面的”/”字符的。?匹配0或1个正好在它之前的那个字符。注意：这个元字符不是所有的软件都支持的。所以</?就是匹配html标签中的”</”格式或者“<”格式的。
再来说[^>]*>。[]是含义是：
^的含义是：匹配一行的开始。例如正则表达式^When
in能够匹配字符串"When
in
the
course
of
human
events"的开始，但是不能匹配"What
and
When
in
the"。意思就是匹配以“When
in”开头的文字。
*的含义是：匹配0或多个正好在它之前的那个字符。例如正则表达式。*意味着能够匹配任意数量的任何字符
因此[^>]*意思是匹配>之外的字符。所以[^>]可以匹配出的模式可以像下面这样的：
div
我需要的文字</div
我需要的文字</p
*和前面的[^>]结合在一起就可以匹配下面这些字符了：
div>我需要的文字</div
p>我需要的文字</p
br
/
再加上后面的>就可以匹配下面的字符了：
div>我需要的文字</div>
p>我需要的文字</p>
br
/>
这样就完成了一对HTML标签的匹配了。(多句话，总觉得这个匹配有点啰嗦，但是不知道到底在哪个地方啰嗦)
第二个：/[
|
]*n/g：我也没有看懂
第三个：/
/ig：就是直接查找
字符，后面的/ig的含义是在全局模式下进行不区分大小写的查找。g代表全局，i表示不区分大小写。

② js 如何把字符串转化为日期

varstr="2010-08-01";

//转换日期格式

str=str.replace(/-/g,'/');//"2010/08/01";

//创建日期对象

vardate=newDate(str);

//加一天

date.setDate(date.getDate()+1);

(2)js格式化html字符串扩展阅读：

反之，日期格式化为字符串

//完整的格式化 var time2 = new Date().format("yyyy-MM-dd hh:mm:ss");

Date.prototype.format = function (fmt) {

var o = {

"M+": this.getMonth() + 1, //月份

"d+": this.getDate(), //日

"h+": this.getHours(), //小时

"m+": this.getMinutes(), //分

"s+": this.getSeconds(), //秒

"q+": Math.floor((this.getMonth() + 3) / 3), //季度

"S": this.getMilliseconds() //毫秒

};

//处理年份

var reYear = /(y+)/;

var resultYear = reYear.exec(fmt);

if (resultYear)

{

var yearformatPart = resultYear[0];//匹配到的格式化字符

var yearVal = (this.getFullYear() + "").substr(4 - yearformatPart.length);

fmt = fmt.replace(yearformatPart, yearVal);

}

for (var k in o) {

var re = new RegExp("(" + k + ")");

var re = re.exec(fmt);

if (re) {

var Val = "" + o[k];//本次需要替换的数据

var formatPart = re[0];//匹配到的格式化字符

var replaceVal = (formatPart.length == 1) ? (Val) : (("00" + Val).substr(Val.length));

fmt = fmt.replace(formatPart, replaceVal);

}

}

return fmt;

}

③ js实现对一个数格式化，先保留两位小数（四舍五入），若小数点前面大于三位，用千位分隔符

<!DOCTYPEHTML>
<htmllang="en-US">
<head>
<metacharset="UTF-8">
<title>menu</title>
<styletype="text/css">
</style>
<scripttype="text/javascript">
functionformat(num,fixed)
{
returnnum.toFixed(fixed).replace(/d{1,3}(?=(d{3})+(.d*)?$)/g,'$&,');
}

console.log(format(1.566,2));
console.info(format(1.56,2));
console.error(format(1234.566,2));
console.debug(format(1234567.56,2));
console.warn(format(0,2));
</script>
</head>
<body>
</body>
</html>

④ js中 将 数字格式化为 小数点后保留2位 怎么弄

需要准备的材料分别是：电脑、html编辑器、浏览器。

1、首先，打开html编辑回器，新建html文件，答例如：index.html。

⑤ Notepad++ 中如何对 HTML/CSS/JS 格式化

插件管理器抄找JSTool
本意只是对JS格式化的插件，拿来格式化CSS还是可以的，但是对html格式化可能会有点问题。xhtml可以用XML Tools，普通html可以用TextFX。
——————————
现在通过插件管理器下载的最新版TextFX里面是缺少Tidy模块的，可以下载Notepad++5.8或更早版本的程序包，从里面提取Tidy模块。另外Tidy2插件也可以试试，不过下载地址是谷歌的。需要注意这两个插件目前只支持32位的Notepad++。

⑥ js 如何替换 html 内的字符串

document.getElementById("你想修改的标签的ID").innerHTML
这是换里面的HTML代码
document.getElementById("你想修改的标签的ID").text
可以换里面的text
document.getElementById("你想修改的标签的ID").value
可以换里面的值

⑦ 怎么对HTML/JS格式化

为了整理混乱的HTML/JS代码，使其变得易于阅读与维护，可以借助代码格式化工具。这些工具能自动对代码进行分行、缩进与对齐，从而提高代码可读性与可维护性。

操作步骤如下：

第一步：访问在线工具网站，如“好用的在线工具都在这里！ (md5.cn)”。

第二步：在网站中找到并点击HTML/JS格式化选项。

第三步：将要格式化或压缩的HTML/JS代码粘贴到指定区域。

第四步：点击“格式化代码”或“压缩代码”按钮进行操作。

通过定期使用代码格式化工具，可以提高工作效率，使代码结构更加清晰、易于理解。因此，将这些工具融入日常工作中是提高编程效率的有效方式。

⑧ html，js 混编的代码，怎么快速格式化

第一种：可以通过在线工具对格式化的代码进行编译或者反编译 http://tool.lu/js/
第二种：可以内通过容谷歌浏览器，F12里面的 Sources模块中选中一个JS文件，里面有一个大括号的按钮，也可以反编译。

⑨ 求一段格式化HTML代码的JS代码。


varHTMLFormat=(function(){
	functionstyle_html(html_source,indent_size,indent_character,max_char){
		,multi_parser;

		functionParser(){

			this.pos=0;
			this.token='';
			this.current_mode='CONTENT';
			this.tags={
				parent:'parent1',
				parentcount:1,
				parent1:''
			};
			this.tag_type='';
			this.token_text=this.last_token=this.last_text=this.token_type='';


			this.Utils={
				whitespace:"

	".split(''),
				single_token:'br,input,link,meta,!doctype,basefont,base,area,hr,wbr,param,img,isindex,?xml,embed'.split(','),
				extra_liners:'head,body,/html'.split(','),
				in_array:function(what,arr){
					for(vari=0;i<arr.length;i++){
						if(what===arr[i]){
							returntrue;
						}
					}
					returnfalse;
				}
			}

			this.get_content=function(){
				varchar='';
				varcontent=[];
				varspace=false;
				while(this.input.charAt(this.pos)!=='<'){
					if(this.pos>=this.input.length){
						returncontent.length?content.join(''):['','TK_EOF'];
					}

					char=this.input.charAt(this.pos);
					this.pos++;
					this.line_char_count++;


					if(this.Utils.in_array(char,this.Utils.whitespace)){
						if(content.length){
							space=true;
						}
						this.line_char_count--;
						continue;
					}elseif(space){
						if(this.line_char_count>=this.max_char){
							content.push('
');
							for(vari=0;i<this.indent_level;i++){
								content.push(this.indent_string);
							}
							this.line_char_count=0;
						}else{
							content.push('');
							this.line_char_count++;
						}
						space=false;
					}
					content.push(char);
				}
				returncontent.length?content.join(''):'';
			}

			this.get_script=function(){
				varchar='';
				varcontent=[];
				varreg_match=newRegExp('</script'+'>','igm');
				reg_match.lastIndex=this.pos;
				varreg_array=reg_match.exec(this.input);
				varend_script=reg_array?reg_array.index:this.input.length;
				while(this.pos<end_script){
					if(this.pos>=this.input.length){
						returncontent.length?content.join(''):['','TK_EOF'];
					}

					char=this.input.charAt(this.pos);
					this.pos++;


					content.push(char);
				}
				returncontent.length?content.join(''):'';
			}

			this.record_tag=function(tag){
				if(this.tags[tag+'count']){
					this.tags[tag+'count']++;
					this.tags[tag+this.tags[tag+'count']]=this.indent_level;
				}else{
					this.tags[tag+'count']=1;
					this.tags[tag+this.tags[tag+'count']]=this.indent_level;
				}
				this.tags[tag+this.tags[tag+'count']+'parent']=this.tags.parent;
				this.tags.parent=tag+this.tags[tag+'count'];
			}

			this.retrieve_tag=function(tag){
				if(this.tags[tag+'count']){
					vartemp_parent=this.tags.parent;
					while(temp_parent){
						if(tag+this.tags[tag+'count']===temp_parent){
							break;
						}
						temp_parent=this.tags[temp_parent+'parent'];
					}
					if(temp_parent){
						this.indent_level=this.tags[tag+this.tags[tag+'count']];
						this.tags.parent=this.tags[temp_parent+'parent'];
					}
					deletethis.tags[tag+this.tags[tag+'count']+'parent'];
					deletethis.tags[tag+this.tags[tag+'count']];
					if(this.tags[tag+'count']==1){
						deletethis.tags[tag+'count'];
					}else{
						this.tags[tag+'count']--;
					}
				}
			}

			this.get_tag=function(){
				varchar='';
				varcontent=[];
				varspace=false;

				do{
					if(this.pos>=this.input.length){
						returncontent.length?content.join(''):['','TK_EOF'];
					}

					char=this.input.charAt(this.pos);
					this.pos++;
					this.line_char_count++;

					if(this.Utils.in_array(char,this.Utils.whitespace)){
						space=true;
						this.line_char_count--;
						continue;
					}

					if(char==="'"||char==='"'){
						if(!content[1]||content[1]!=='!'){
							char+=this.get_unformatted(char);
							space=true;
						}
					}

					if(char==='='){
						space=false;
					}

					if(content.length&&content[content.length-1]!=='='&&char!=='>'&&space){
						if(this.line_char_count>=this.max_char){
							this.print_newline(false,content);
							this.line_char_count=0;
						}else{
							content.push('');
							this.line_char_count++;
						}
						space=false;
					}
					content.push(char);
				}while(char!=='>');

				vartag_complete=content.join('');
				vartag_index;
				if(tag_complete.indexOf('')!=-1){
					tag_index=tag_complete.indexOf('');
				}else{
					tag_index=tag_complete.indexOf('>');
				}
				vartag_check=tag_complete.substring(1,tag_index).toLowerCase();
				if(tag_complete.charAt(tag_complete.length-2)==='/'||this.Utils.in_array(tag_check,this.Utils.single_token)){
					this.tag_type='SINGLE';
				}elseif(tag_check==='script'){
					this.record_tag(tag_check);
					this.tag_type='SCRIPT';
				}elseif(tag_check==='style'){
					this.record_tag(tag_check);
					this.tag_type='STYLE';
				}elseif(tag_check.charAt(0)==='!'){
					if(tag_check.indexOf('[if')!=-1){
						if(tag_complete.indexOf('!IE')!=-1){
							varcomment=this.get_unformatted('-->',tag_complete);
							content.push(comment);
						}
						this.tag_type='START';
					}elseif(tag_check.indexOf('[endif')!=-1){
						this.tag_type='END';
						this.unindent();
					}elseif(tag_check.indexOf('[cdata[')!=-1){
						varcomment=this.get_unformatted(']]>',tag_complete);
						content.push(comment);
						this.tag_type='SINGLE';
					}else{
						varcomment=this.get_unformatted('-->',tag_complete);
						content.push(comment);
						this.tag_type='SINGLE';
					}
				}else{
					if(tag_check.charAt(0)==='/'){
						this.retrieve_tag(tag_check.substring(1));
						this.tag_type='END';
					}else{
						this.record_tag(tag_check);
						this.tag_type='START';
					}
					if(this.Utils.in_array(tag_check,this.Utils.extra_liners)){
						this.print_newline(true,this.output);
					}
				}
				returncontent.join('');
			}

			this.get_unformatted=function(delimiter,orig_tag){
				if(orig_tag&&orig_tag.indexOf(delimiter)!=-1){
					return'';
				}
				varchar='';
				varcontent='';
				varspace=true;
				do{


					char=this.input.charAt(this.pos);
					this.pos++

					if(this.Utils.in_array(char,this.Utils.whitespace)){
						if(!space){
							this.line_char_count--;
							continue;
						}
						if(char==='
'||char==='
'){
							content+='
';
							for(vari=0;i<this.indent_level;i++){
								content+=this.indent_string;
							}
							space=false;
							this.line_char_count=0;
							continue;
						}
					}
					content+=char;
					this.line_char_count++;
					space=true;


				}while(content.indexOf(delimiter)==-1);
				returncontent;
			}

			this.get_token=function(){
				vartoken;

				if(this.last_token==='TK_TAG_SCRIPT'){
					vartemp_token=this.get_script();
					if(typeoftemp_token!=='string'){
						returntemp_token;
					}
					//token=js_beautify(temp_token,this.indent_size,this.indent_character,this.indent_level);
					//return[token,'TK_CONTENT'];
					return[temp_token,'TK_CONTENT'];
				}
				if(this.current_mode==='CONTENT'){
					token=this.get_content();
					if(typeoftoken!=='string'){
						returntoken;
					}else{
						return[token,'TK_CONTENT'];
					}
				}

				if(this.current_mode==='TAG'){
					token=this.get_tag();
					if(typeoftoken!=='string'){
						returntoken;
					}else{
						vartag_name_type='TK_TAG_'+this.tag_type;
						return[token,tag_name_type];
					}
				}
			}

			this.printer=function(js_source,indent_character,indent_size,max_char){
				this.input=js_source||'';
				this.output=[];
				this.indent_character=indent_character||'';
				this.indent_string='';
				this.indent_size=indent_size||2;
				this.indent_level=0;
				this.max_char=max_char||70;
				this.line_char_count=0;
				for(vari=0;i<this.indent_size;i++){
					this.indent_string+=this.indent_character;
				}

				this.print_newline=function(ignore,arr){
					this.line_char_count=0;
					if(!arr||!arr.length){
						return;
					}
					if(!ignore){
						while(this.Utils.in_array(arr[arr.length-1],this.Utils.whitespace)){
							arr.pop();
						}
					}
					arr.push('
');
					for(vari=0;i<this.indent_level;i++){
						arr.push(this.indent_string);
					}
				}


				this.print_token=function(text){
					this.output.push(text);
				}

				this.indent=function(){
					this.indent_level++;
				}

				this.unindent=function(){
					if(this.indent_level>0){
						this.indent_level--;
					}
				}
			}
			returnthis;
		}
		multi_parser=newParser();
		multi_parser.printer(html_source,indent_character,indent_size);
		while(true){
			vart=multi_parser.get_token();
			multi_parser.token_text=t[0];
			multi_parser.token_type=t[1];

			if(multi_parser.token_type==='TK_EOF'){
				break;
			}


			switch(multi_parser.token_type){
			case'TK_TAG_START':
			case'TK_TAG_SCRIPT':
			case'TK_TAG_STYLE':
				multi_parser.print_newline(false,multi_parser.output);
				multi_parser.print_token(multi_parser.token_text);
				multi_parser.indent();
				multi_parser.current_mode='CONTENT';
				break;
			case'TK_TAG_END':
				multi_parser.print_newline(true,multi_parser.output);
				multi_parser.print_token(multi_parser.token_text);
				multi_parser.current_mode='CONTENT';
				break;
			case'TK_TAG_SINGLE':
				multi_parser.print_newline(false,multi_parser.output);
				multi_parser.print_token(multi_parser.token_text);
				multi_parser.current_mode='CONTENT';
				break;
			case'TK_CONTENT':
				if(multi_parser.token_text!==''){
					multi_parser.print_newline(false,multi_parser.output);
					multi_parser.print_token(multi_parser.token_text);
				}
				multi_parser.current_mode='TAG';
				break;
			}
			multi_parser.last_token=multi_parser.token_type;
			multi_parser.last_text=multi_parser.token_text;
		}
		returnmulti_parser.output.join('');
	}

	returnfunction(data){
		vardataHolder=['__dataHolder_',[Math.random(),Math.random(),Math.random(),Math.random()].join('_').replace(/[^0-9]/g,'_'),'_'].join('_');
		vardataHolders={};
		varindex=0;
		data=data.replace(/(")(data:[^"]*)(")/g,function($0,$1,$2,$3){
			varname=dataHolder+index++;
			dataHolders[name]=$2;
			return$1+name+$3;
		})
		data=style_html(data,1,'	',0x10000000);
		data=data.replace(newRegExp(dataHolder+'[0-9]+','g'),function($0){
			returndataHolders[$0];
		});

		returndata;
	}
})();


//demo:
varformattedHtml=HTMLFormat('<div><span><br>xxx</span></div>');

阅读全文

与js格式化html字符串相关的资料

热点内容
maya粒子表达式教程 浏览：84
抖音小视频如何挂app 浏览：283
cad怎么设置替补文件 浏览：790
win10启动文件是空的 浏览：397
jk网站有哪些 浏览：134
学编程和3d哪个更好 浏览：932
win10移动硬盘文件无法打开 浏览：385
文件名是乱码还删不掉 浏览：643
苹果键盘怎么打开任务管理器 浏览：437
手机桌面文件名字大全 浏览：334
tplink默认无线密码是多少 浏览：33
ipaddgm文件 浏览：99
lua语言编程用哪个平台 浏览：272
政采云如何导出pdf投标文件 浏览：529
php获取postjson数据 浏览：551
javatimetask 浏览：16
编程的话要什么证件 浏览：94
钱脉通微信多开 浏览：878
中学生学编程哪个培训机构好 浏览：852
荣耀路由TV设置文件共享错误 浏览：525

友情链接