用正则表达式格式化html标签的代码

所属分类: 网络编程 / 正则表达式 阅读数: 689
收藏 0 赞 0 分享
复制代码 代码如下:

<html>
<head>
</head>
<body>
<style>
#x_edit{
  height:320px;
  width:540px;
  border:1px solid #666666;

  color:red;

  filter:chroma(color="#0f0f0f");
  background-color:#f0f0f0;
  font-family:verdana;
  font-size:11px;
  line-height:13px;
  margin-left:16px;
  overflow:scroll;
  border-left:none;
  scrollbar-arrow-color:#666666;
  scrollbar-base-color:#666666;
  scrollbar-darkshadow-color:#f0f0f0;
  scrollbar-face-color:#f0f0f0;
  }
</style>
<span onclick="abc()">格式化</span>
<div contentEditable="true" id="x_edit" style='position:relative;line-height:13px;background-color:#f0f0f0;filter:Chroma(color=#FDFEFF);width:540px;height:320px;overflow:auto;white-space: nowrap; z-index: 2;border:0px'>
<P>&lt;html&gt;<BR>&lt;head&gt;<BR>&lt;/head&gt;<BR>&lt;body&gt;<BR>&lt;style&gt;<BR>#x_edit,#x_edit1{<BR>&nbsp; height:320px;<BR>&nbsp; width:540px;<BR>&nbsp; border:1px solid #666666;</P>
<P>&nbsp; color:red;</P>
<P>&nbsp; filter:chroma(color="#0f0f0f");<BR>&nbsp; background-color:#f0f0f0;<BR>&nbsp; font-family:verdana;<BR>&nbsp; font-size:11px;<BR>&nbsp; line-height:13px;<BR>&nbsp; margin-left:16px;<BR>&nbsp; overflow:scroll;<BR>&nbsp; border-left:none;<BR>&nbsp; scrollbar-arrow-color:#666666;<BR>&nbsp; scrollbar-base-color:#666666;<BR>&nbsp; scrollbar-darkshadow-color:#f0f0f0;<BR>&nbsp; scrollbar-face-color:#f0f0f0;<BR>&nbsp; }<BR>&lt;/style&gt;<BR>&lt;span onclick="abc()"&gt;试试获得selection的top,然后加上div的scrollTop,然后除以行高&lt;/span&gt;<BR>&lt;span id="a" onclick="alert('a')"&gt;a&lt;/span&gt;<BR>&lt;span id="b" onclick="alert('b')"&gt;b&lt;/span&gt;<BR>&lt;span id="c" onclick="alert('c')"<BR>&gt;c&lt;/span&gt;<BR>&lt;span id="d" onclick="alert('d')"&gt;d&lt;/span&gt;<BR>&lt;span id="e" onclick="alert('e')"&gt;e&lt;/span&gt;<BR>&lt;span id="f" onclick="alert('f')"&gt;f&lt;/span<BR>&gt;<BR>&lt;span id="g"<BR>&nbsp;onclick="alert('g')"&gt;g&lt;/span&gt;<BR>&lt;textarea id="x_edit" wrap=off&gt;&lt;/textarea&gt;<BR>&lt;div contentEditable="true" id="x_edit1" style='position:relative;line-height:13px;background-color:#f0f0f0;filter:Chroma(color=#FDFEFF);width:540px;height:320px;overflow:auto;white-space: nowrap; z-index: 2;border:0px'&gt;&lt;/div&gt;<BR>&lt;script&gt;<BR>function abc(){<BR>&nbsp;&nbsp;&nbsp; //s=x_edit1.innerText;<BR>&nbsp;&nbsp;&nbsp; var s=x_edit.value;<BR>&nbsp;&nbsp;&nbsp; s=s.replace(/\n/gi,"");<BR>&nbsp;&nbsp;&nbsp; //s=s.replace(/&lt;(\w+)(.*?)[^&lt;&gt;]&gt;/gi,"&lt;"+aaa("$1$2")+"&gt;");<BR>&nbsp;&nbsp;&nbsp; s=s.replace(/&lt;(.*?)[^&lt;&gt;]&gt;/gi,"&lt;"+aaa("$1")+"&gt;");<BR>&nbsp;&nbsp;&nbsp; s=s.replace(/\n/gi,"@");<BR>&nbsp;&nbsp;&nbsp; //var LineValue=x_edit1.innerText.split("\r")<BR>&nbsp;&nbsp;&nbsp; /*var LineValue=x_edit.value.split("\r")<BR>for(var i=0;i&lt;LineValue.length;i++){<BR>&nbsp;&nbsp;&nbsp; LineValue[i]=LineValue[i].replace(/(".*")/gi,"$1".replace(/&lt;/gi,"\xef").replace(/&gt;/gi,"\xff"))<BR>&nbsp;&nbsp;&nbsp; LineValue[i]=LineValue[i].replace(/&lt;(.*[^&lt;&gt;])&gt;/gi,"&lt;"+"$1"+"&gt;\r")<BR>&nbsp;&nbsp;&nbsp; LineValue[i]=LineValue[i].replace(/\r\r/gi,"\r")<BR>&nbsp;&nbsp;&nbsp; LineValue[i]=LineValue[i].replace(/(".*")/gi,"$1".replace(/\xef/gi,"&lt;").replace(/\xff/gi,"&gt;"))<BR>}*/<BR>&nbsp;&nbsp;&nbsp; //x_edit1.innerText=LineValue.join("");<BR>&nbsp;&nbsp;&nbsp; //x_edit.value=LineValue.join("");<BR>&nbsp;&nbsp;&nbsp; x_edit.value=s;<BR>&nbsp;&nbsp;&nbsp; //x_edit1.innerText=s;<BR>}<BR>function aaa(str){<BR>&nbsp;&nbsp;&nbsp; str=str.replace(/\r/gi," ");<BR>&nbsp;&nbsp;&nbsp; return str;<BR>}<BR>&lt;/script&gt;<BR>&lt;/body&gt;<BR>&lt;/html&gt;</P>
</div>

<script>
function abc(){
    var s=x_edit.innerText;
    s=s.replace(/<\/?(\w+[\s\S]*?)>/gi,function(a){return a.replace(/[\r\n]/gi,"")});
    x_edit.innerText=s;
}
</script>
</body>
</html>
更多精彩内容其他人还在看

正则表达式验证IPV4地址功能实例分析

这篇文章主要介绍了正则表达式验证IPV4地址功能,结合实例形式分析了IPV4地址验证的原理及具体实现技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

正则表达式教程之前后查找lookaround详解

这篇文章主要介绍了正则表达式教程之前后查找lookaround,结合具体问题分析了向前查找及向后查找功能的实现技巧与注意事项,需要的朋友可以参考下
收藏 0 赞 0 分享

正则匹配密码只能是数字和字母组合字符串功能【php与js实现】

这篇文章主要介绍了正则匹配密码只能是数字和字母组合字符串功能,涉及针对字符、数字等正则操作相关技巧,并给出了php与js实现示例,需要的朋友可以参考下
收藏 0 赞 0 分享

正则验证不能含有中文的实现方法【jQuery与java实现】

这篇文章主要介绍了正则验证不能含有中文的实现方法,结合jQuery与java两种实现方法分析了针对中文的正则验证操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

JS 密码强度校验的正则表达式(简单且好用)

最近在做一个通行证的项目,在项目中有这样的需求,注册模块中输入密码需要显示密码强度,今天小编给大家分享JS 密码强度校验的正则表达式,简单好用,需要的朋友参考下
收藏 0 赞 0 分享

iOS 正则表达式判断纯数字及匹配11位手机号码的方法

这篇文章主要介绍了iOS 正则表达式判断纯数字及匹配11位手机号码的方法,判断手机号码是否正确的方法很多,我是用正则表达式来完成匹配的,具体方法,大家参考下本文
收藏 0 赞 0 分享

正则表达式(简单易懂篇)

正则表达式是一种可以用于模式匹配和替换的强大工具。这篇文章主要介绍了正则表达式(简单易懂篇),需要的朋友参考下
收藏 0 赞 0 分享

正则表达式实现匹配连续数字的方法

我这两天刚刚学正则表达式。我觉的正则对连续的字符匹配很简单,但是对连续的一段数字匹配就不是很好。正好最近有朋友问了匹配连续数字的正则,就帮忙写了一下,算是当作温习一下吧。下面这篇文章就主要介绍了正则表达式实现匹配连续数字的方法。
收藏 0 赞 0 分享

正则表达式简介及在C++11中的简单使用教程

正则表达式(regular expression)是计算机科学中的一个概念,又称规则表达式,通常简写为regex、regexp、RE、regexps、regexes、regexen。接下来通过本文给大家介绍正则表达式简介及在C++11中的简单使用教程,一起通过本文学习吧
收藏 0 赞 0 分享

正则表达式实现最小匹配功能的方法

这篇文章主要介绍了正则表达式实现最小匹配功能的方法,结合具体实例形式分析了正则表达式最小匹配功能的原理与实现技巧,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多