Re: [問題] 有辦法完全不用innerHTML嗎？

看板Ajax作者s25g5d4 (死城盜賊)時間14年前 (2010/07/14 16:45)推噓2(2推 0噓 4→)

留言6則, 2人參與討論串10/11 (看更多)

※ 引述《TonyQ (沉默是金。)》之銘言： : ※ 引述《No (you stay there)》之銘言： : : 以s25大原有的架構 : : 改寫成我的作法 : : 手邊沒IE6測 : : Firefox、Chrome5、IE8都可以run : : 另外有加上一些疊字和嵌入一個youtube影片來測試訴求 : : 編輯: http://jsfiddle.net/D349J/1/ : : 結果: http://fiddle.jshell.net/D349J/1/show/light/ : 用自己習慣的方式整理程式碼，順便詳閱一下做了什麼事情 XD : ## FIX for ie only script. : http://jsfiddle.net/RNwh8/6/ : 大概整理的方向如下： : 1.固定且重複的字串改用全域變數寫，方便改動。 : 2.一些跟主軸比較無關的邏輯實作其實可以拆出來（像getElementsByClassName) : 有些函式或參數加上底線是為了不要跟default的函式衝到 XD : 3.拆出來也比較方便針對不同 browser 去實做不同的邏輯。 : 4.有扯到regex的盡量放個sample方便瞭解regex行為 : 5.把複雜的呼叫行為 ex . a.xxx().yyy().ccc(fn()) 盡可能的分開， : 除非那些行為本來就是用來設計做 chain method的... : --- : 不過憑良心講，這個功能我還是比較寧願用 jquery highlight plug-in 寫 XD : http://bartaz.github.com/sandbox.js/jquery.highlight.html 事情是這樣的~ 前幾天在冥想(發呆)時突然想到了一串regex /(c+)|([^c]+)/g 簡單的說就是 abcabababcccabacccababcccccccaccc 將會被切成 ab,c,ababab,ccc,aba,ccc,abab,ccccccc,a,ccc 真是好方便阿~ 所以便著手重寫了一次search() http://jsfiddle.net/EgEcK/3/ //code base on TonyQ function search(target,search_str) { var _tag=null,tag=target.firstChild; var regex_search= new RegExp("("+search_str+"+)|([^"+search_str+"]+)","g"); do { if(tag.hasChildNodes()){ search(tag,search_str); } //用regexp是為了可找出疊字或字串連續疊字 if(tag.nodeName=='#text' && tag.nodeValue.match(search_str)) { var matches=tag.nodeValue.match(regex_search); for(var i=0;i<matches.length;i++) { tag.parentNode.insertBefore( matches[i].match(search_str) ? createReplacedTxtNode(matches[i]) : prependWordTxt(matches[i]), tag); } _tag=tag.previousSibling; deleteTag(tag); tag=_tag; } tag=tag.nextSibling; } while(tag); } //其他有更改的函數 function prependWordTxt(prependWord){ var newTxtNode=document.createTextNode(prependWord); return newTxtNode; //其實傳空字串進去也沒關係阿~ } if(!document.getElementsByClassName) { document.getElementsByClassName=function(classN) { var a=[]; var query_results = document.getElementsByTagName('*'); for(var i=0;i<query_results.length;i++) { if(query_results[i].className==classN) a.push(query_results[i]); } return a; }; } //是的正是我前幾天寫的那個getElementsByClassName function goSearch(target,search_str) { reverse_str(); if(search_str!="" && typeof search_str=="string" && target.nodeType==1) search(target,search_str); } //多了幾個檢查 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 218.172.100.35 ※ 編輯: s25g5d4 來自: 218.172.100.35 (07/14 16:54)