最近被安排做了一個HTML在線編譯功能，也利用這個機會對HTML在線編譯，關鍵字高亮，富文本編輯器等的實現做了一些比較表面的研究，做簡要記錄，以便再次遇到作為參考。
在線HTML編譯
首先需要一個能夠輸入及展示HTML代碼的文本框，若只是顯示普通HTML代碼，使用<textarea>即可（w3school在線編譯功能即如此）。若還要在其中實現標簽及關鍵字高亮，則使用<div>（百度在線編譯功能），這里需要將<div>設置為contentEditable="true",將其設置為可編輯狀態。
使用<textarea>實現，textarea為代碼輸入框，旁邊需要一個iframe來展示代碼運行結果。
核心JS代碼：
function run(){
var iframeContent=$(".mysource").val();
var iFrame=document.getElementById("container").contentWindow;
iFrame.document.open();
iFrame.document.write(iframeContent);
iFrame.document.close();
}
var iframeContent=$(".mysource").val()來獲取textarea內容；
var iFrame=document.getElementById("container").contentWindow得到iframe對象；
iFrame.document.write(iframeContent)將textarea內容寫入iframe得到結果。
若涉及到從外部向textarea導入代碼，可考慮設置不可見iframe在textarea之前，iframe中也需設置textarea，獲取iframe中textarea內容，並將其賦給顯示代碼處的textarea，核心代碼如下：
function go1(){
var win = document.getElementById('demo1').contentWindow.document.getElementById('code').value;
document.getElementById("mysource").value=win;
}
文本關鍵字高亮
通常用<div>來實現，核心思想為獲取div中文本，並用設置了高亮的相同內容替換之。
核心JQ代碼：
$(document).ready(function() {
var key = "高亮字";
$("#keyword").html(function() {
return $(this).text().replace(key,"<font color=\"blue\">"+key+"</font>");
});
多關鍵字：
<script language="JavaScript">
txt.innerHTML = txt.innerHTML.replace(/(文章)|(關鍵字)|(功能)/gi,"<font color=red>$1$2$3</font>");
</script>
txt為div。
富文本編輯器
富文本編輯器往往需要對字體大小，顏色，插入圖片，表情等做眾多改變，目前用得最多、兼容性最好的還是iframe方式。
先將iframe標簽通過：
var edit=document.getElementById("myedit").contentWindow;
edit.document.designMode="On";
edit.document.contentEditable="ture";
將其設置為可編輯狀態。換而言之，HTML在線編輯器就是一個可編輯的iframe。
具體功能實現：
瀏覽器已經提供了實現這些功能的接口execCommand：
iframe.contentWindow.document.execCommand(cmd, isDefaultShowUI, value);
execCommand具體使用參見下篇博文。
以上為在線HTML編譯，文本關鍵字高亮，富文本編輯器實現大致思路，由於他們功能看似類似，實則不然，所以放在一起以便對比討論。
新手，歡迎高手批評指正。