加亮语法代码

HTML代码加亮显示功能实现

最新推荐文章于 2022-11-07 21:11:10 发布

原创最新推荐文章于 2022-11-07 21:11:10 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #function #div

JavaScript 专栏收录该内容

136 篇文章

订阅专栏

博客展示了一段HTML代码，通过JavaScript函数实现代码加亮显示功能。定义了多个函数处理标签和属性的颜色显示，在页面加载和文本框输入时触发加亮操作，最终在指定的div中显示加亮后的代码。

代码如下：
<HTML> <HEAD> <TITLE>加亮显示</TITLE> <style> * {font-size: 14px} </style> <script language="JScript"> function highLight_attribute($1) { var attribute_html = $1 var re = /([/S]+=)(/S+)/g attribute_html = attribute_html.replace(re, "<font color=red>$1</font><font color=black>$2</font>") return attribute_html } function highLight_tag($1) { return "<font color=blue>"+highLight_attribute($1)+"</font>" } function highLight(html) { re = /(<[/S]+?.*?>)/g html = html.replace(re, highLight_tag) html = html.replace(//n/g, "<br>") html = html.replace(/(/$?/d+(%|px)?)/g, "<font color=red>$1</font>") html = html.replace(/(/".*?/")/g, function($1) { $1 = $1.replace(/<.*?>/g, "") return "<font color=#999999>"+$1+"</font>" }) html_lightcode.innerHTML = html } </script> </HEAD> <BODY onload="html_code.innerText=document.documentElement.outerHTML; highLight(html_code.innerHTML)"> <textarea id=html_code rows=15 style="width:100%" onkeyup="highLight(html_code.innerHTML)"></textarea> <br> <div id=html_lightcode></div> </BODY> </HTML>
[Ctrl+A 全选提示:你可先修改部分代码,再点运行代码]