MozTW 討論區
https://forum.moztw.org/

將 HTML 標籤和屬性轉成小寫
https://forum.moztw.org/viewtopic.php?f=8&t=12828		 第 1 頁 (共 1 頁)
發表人:  kourge [ 2006-02-13, 02:17 ]
文章主題 :  將 HTML 標籤和屬性轉成小寫
今天遇到一個問題...

假如今天有個字串...
代碼:
var x = "<IMG SRC='BLAH' ALT=\"Firefox\" />";


我想把它用 RegExp 轉成這樣
代碼:
<img src="BLAH" alt="Firefox" />


條件就是...
  • 標籤已經 self-closed
  • 標籤名稱改成小寫
  • 標籤屬性名稱改成小寫，但屬性的值不變
  • 單引號一律改成雙引號（可有可無）

我有試寫了一下這個...
代碼:
var x = "<IMG SRC=\"blah\" ALT=\"\" />";
var re = /<(.+) (?:(.+)\=(?:\"|\')(.+)(?:\"|\'))+ \/>/gi;
x = x.replace(re, "<$1 " + "$2".toLowerCase() + "=\"$3\" />");

但是似乎沒有什麼用，x 把它 alert 出來還是大寫。
發表人:  passerby [ 2006-02-13, 15:25 ]
文章主題 : 
建議將問題分為幾個小問題來處理會簡單一些，因為很難寫出一個match這樣pattern的regular expression。

沒有太多時間可供思考，暫時給你一個近似答案處理方法(這個做法並非準確)。


代碼:
var x = "<IMG SRC=\"BLAH\" ALT=\"ABCDEF\" />";

var y = x.replace(/<([^>]+)\/>/gi, function(s){
   s = s.replace(/<([^>]+)\/>/gi, "$1");      //tag content
   s = s.replace(/[\a-zA-Z\x20]{1,}=/gi, function(t){
      t=t.toLowerCase();
      return t;
      });

   return '<' + s + '\/>';
});

alert(y);
發表人:  passerby [ 2006-02-13, 15:40 ]
文章主題 : 
寫了另一個，可以處理隔行的 tag。

代碼:
var x = "<IMG SRC=\"BLAH\" \n ALT=\"ABCDEF\" />";

var y = x.replace(/<([^>]+)\/>/gi, function(s){
   s = s.replace(/[\a-zA-Z\s]{1,}=/gi, function(t){
      t=t.toLowerCase();
      return t;
      });

   return s;
});

alert(y);
發表人:  passerby [ 2006-02-13, 23:38 ]
文章主題 : 
這個應該大約符合你的要求。:D，這段程式也可以處理並沒有 "/>" 在結尾的html tag。


代碼:
function tag2Lowercase(s){
   //for doublequote properties to lowcase
   var str2 = s.replace(/[a-zA-Z\x20]{1,}=\x22(?:[^\x22]{1,})\x22/gi, function(t){            
         var reg = /([a-zA-Z\x20]{1,})(=\x22[^\x22]{1,}\x22)/gi;

         var p1 = (t.replace(reg, "$1")).toLowerCase();         
         var p2 = t.replace(reg, "$2");         

         return (p1 + p2);
      });
   // for singlequote properties to lowcase
   str2 = str2.replace(/[a-zA-Z\x20]{1,}=\x27(?:[^\x27]{1,})\x27/gi, function(t){
         var reg = /([a-zA-Z\x20]{1,})(=\x27[^\x27]{1,}\x27)/gi;

         var p1 = (t.replace(reg, "$1")).toLowerCase();
         var p2 = t.replace(reg, "$2");
                           
         return (p1 + p2);
      });
      
   return str2;
}

function singleQuote2doubleQuote(str3){
   var reg = /([a-zA-Z\x20]{1,})=\x27([^\x27]{1,})\x27/gi;   
   str3 = str3.replace(reg, "$1=\x22$2\x22");
   return str3;
}


function convertTag(x){
   var y = x.replace(/<([^>]+)[\/]{0,}>/gi, function(str){      
         var z = tag2Lowercase(str);
         z = singleQuote2doubleQuote(z);         
         return z;
      });
   return y;   
}

var x = "<IMG SRC=\"TEMPLATES/LITEVISION/IMAGES/FOLDER.GIF\" ALT=\'沒有新文章A\' TITLE=\"沒有新文章B\" \/>";

alert(x);
alert(convertTag(x));
發表人:  passerby [ 2006-02-13, 23:59 ]
文章主題 : 
以上寫法好像有點複雜，其實string.replace(reg, function(s){中的
s 其實等於 整個match pattern，以下例子會令你較為容易明白這樣這法的效果。

代碼:

function convertTag(strIn){      
    var regEx = /\[google:(.*?)\]/ig;
   
    strIn = strIn.replace(regEx, function(s){
            var strurl = s.replace(/\[google:(.*?)\]/ig, "$1");
            var strEncodeURI = strurl;
         
            if (window.encodeURIComponent) {strEncodeURI = window.encodeURIComponent(strurl);}
            s = "<a href='http://www.google.com.hk/search?q=" + strEncodeURI + "'  target='_blank' >" + strurl + "</a>";
            return s;
         });
   return strIn;
}
         
var str = "[google:計算所需時間]";
alert(convertTag(str));
發表人:  kourge [ 2006-02-14, 12:37 ]
文章主題 : 
我在想那個 \x22 能不能改成 (?:\x22|\x27)，這樣兩個都能用？
發表人:  passerby [ 2006-02-14, 13:13 ]
文章主題 : 
kourge 寫:
我在想那個 \x22 能不能改成 (?:\x22|\x27)，這樣兩個都能用？


好像不能這樣處理？？？，這樣寫法有可能出現 'xxxx" 或 "xxxxxxxx' 的字串引至出錯。
發表人:  kourge [ 2006-02-16, 15:06 ]
文章主題 : 
唉唉唉，好難><"
不知道有沒有什麼方法可以用 JavaScript 把 HTML 改成 valid XHTML...
其實 TinyMCE 有那個 code
不過，感覺好像有點難搞定orz
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/