如何用javascript正則實現(xiàn)移除注釋
本篇內(nèi)容介紹了“如何用javascript正則實現(xiàn)移除注釋”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！
公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出青州免費做網(wǎng)站回饋大家。
1 單行注釋
單行注釋要么占據(jù)一整行，要么處于某一行的***。
正常情況下不難，直接通過正則匹配，再用replace方法移除便可。
let codes = ` let name = "Wmaker"; // This is name. if (name) { // Print name. console.log("His name is:", name); } `; console.log( codes.replace(/\/\/.*$/mg, '') ); // 打印出： // let name = "Wmaker"; // if (name) { // // console.log("His name is:", name); // }上面是成功的刪除了注釋，不過對于獨占一整行的注釋清理的不夠徹底，會留下空白行。實際上，行尾注釋前面的空白也被保留了下來。所以目標稍稍提高，清除這些空白。操作起來也并不難，思路大致這樣：刪除整行，實際上是刪除本行末尾的換行符或上一行末尾的換行符。而換行符本身也屬于空白符。所以只需操作正則，匹配到注釋以及注釋前面所有的空白符即可，一箭雙雕。
let codes = ` let name = "Wmaker"; // This is name. if (name) { // Print name. console.log("His name is:", name); } `; console.log( codes.replace(/\s*\/\/.*$/mg, '') ); // 打印出： // let name = "Wmaker"; // if (name) { // console.log("His name is:", name); // }如果在字符串中出現(xiàn)完整的URL地址，上面的正則會直接匹配而將其刪除。網(wǎng)上大多會將URL的格式特征（http://xxx）：雙下劃線前面有冒號，作為解決途徑加以利用。但這只是治標不治本的做法，畢竟//以任何形式出現(xiàn)在字符串中是它的自由，我們無從干涉。
這樣問題就轉(zhuǎn)變成：如何使正則匹配存在于引號外的雙下劃線？
想匹配被引號包圍，帶有雙下劃線的代碼塊比較簡單：/".*\/\/.*"/mg。難點在于如何實現(xiàn)這個否定，即當正則匹配到雙下劃線后，再判斷其是否在引號里面？絞盡腦汁，也上網(wǎng)查了很多，都沒有像樣的結(jié)果。靜心平氣，洗把臉刷刷牙再沖個頭冷靜之后，覺得單純使用正則的路已經(jīng)走不通了，得跳出這個圈。
就在***關(guān)頭，在那淫穢污濁的房間上方突然光芒萬丈。我急忙護住了充滿血絲的眼睛，靜待其適應(yīng)后定睛一看。只見那里顯現(xiàn)出了一段文字（Chinese）：孩兒啊，先將帶有//被引號包圍的字符串替換掉，去掉注釋后再還原，不就行了嗎？
let codes = ` let name = "Wmaker"; // This is name. if (name) { // Print name. console.log("His name is:", name); console.log("Unusual situation, characters of // in quotation marks."); } `; // 之前的方式。 console.log( codes.replace(/\s*\/\/.*$/mg, '') ); // 打印出： // let name = "Wmaker"; // if (name) { // console.log("His name is:", name); // console.log("Unusual situation, characters of // } // 現(xiàn)在的方式。 console.log( removeComments(codes) ); // 打印出： // let name = "Wmaker"; // if (name) { // console.log("His name is:", name); // console.log("Unusual situation, characters of // in quotation marks."); // } function removeComments(codes) { let {replacedCodes, matchedObj} = replaceQuotationMarksWithForwardSlash(codes); replacedCodes = replacedCodes.replace(/\s*\/\/.*$/mg, ''); Object.keys(matchedObj).forEach(k => { replacedCodes = replacedCodes.replace(k, matchedObj[k]); }); return replacedCodes; function replaceQuotationMarksWithForwardSlash(codes) { let matchedObj = {}; let replacedCodes = ''; let regQuotation = /".*\/\/.*"/mg; let uniqueStr = 'QUOTATIONMARKS' + Math.floor(Math.random()*10000); let index = 0; replacedCodes = codes.replace(regQuotation, function(match) { let s = uniqueStr + (index++); matchedObj[s] = match; return s; }); return { replacedCodes, matchedObj }; } }是的，目標達成了，老天眷顧啊！
另外，有一個需要優(yōu)化的地方：定義字符串的方式有三種 ' " ` ，目前我們只匹配了雙引號。
為了避免正則的記憶功能，都使用了正則字面量進行測試。
--- 之前
console.log( /".*\/\/.*"/mg.test(`'Unu//sual'`) ); // false console.log( /".*\/\/.*"/mg.test(`"Unu//sual"`) ); // true console.log( /".*\/\/.*"/mg.test(`\`Unu//sual\``) ); // false
--- 之后
console.log( /('|"|`).*\/\/.*\1/mg.test(`'Unu//sual'`) ); // true console.log( /('|"|`).*\/\/.*\1/mg.test(`"Unu//sual"`) ); // true console.log( /('|"|`).*\/\/.*\1/mg.test(`\`Unu//sual\``) ); // true??！問題到此結(jié)束了！
真的結(jié)束了嗎？不！我看了看時間：02:17，然后將眼鏡摘下，扯了張紙巾，拭去了幾顆淚水。
以下是接連解決的兩個問題：貪婪模式和轉(zhuǎn)義字符。
--- STEP 1，由于正則的貪婪模式導致。 let codes = ` let str = 'abc//abc'; // abc' `; console.log( codes.match(/('|"|`).*\/\/.*\1/mg) ); // ["'abc//abc'; // abc'"] -- 解決 let codes = ` let str = 'abc//abc'; // abc' `; console.log( codes.match(/('|"|`).*?\/\/.*?\1/mg) ); // ["'abc//abc'"] --- STEP 2，由定義字符串時其中的轉(zhuǎn)義字符導致。 let codes = ` let str = 'http://x\\'x.com'; // 'acs `; console.log( codes.match(/('|"|`).*?\/\/.*?\1/mg) ); // ["'http://x\'", "'; // '"] -- 解決 let reg = /(?事情到這里，雖然勞累，但多少有些成就感，畢竟成功了。
可是，可是，可是在測試時，竟然無意間發(fā)現(xiàn)一個無法逾越的障礙。就好比費勁千辛萬苦花費無盡的財力物力之后，某某尤物終于愿意一同去情人旅館時，卻發(fā)現(xiàn)家家爆滿，沒有空余的房間。在強裝歡笑，玩命的哄騙著她，一家接連一家的尋找直到終于定到房間后，卻發(fā)現(xiàn)自己已然挺不起來了！
正則會將任意位置的引號作為查找的起始位置，它不在乎引號是成雙的道理。下面是一個示例。
let reg = /(?不過，問題好歹在補過覺之后的 06:37 時得以解決。
思路是這樣的：雖然不能正確實現(xiàn)匹配帶有//被引號包圍的代碼塊（可能有方法，但能力有限），但是簡化成匹配單純被引號包圍的代碼塊，是簡單而且能正確做到的，雖然耗費的內(nèi)存多了一些。另外，兩引號間也可能包含換行符，所以為其增加s模式：.代表全部字符。下面是去除單行注釋的最終代碼。
let codes = ` let name = "Wmaker"; // This is name. let str = 'http://x\\'x.com' + " / / " + '/"/"/'; // '; // " " if (name) { // Print name. console.log("His name is:", name); console.log("Unusual situation, characters of // in quotation marks."); } `; console.log(removeComments(codes)); // 打印出： // let name = "Wmaker"; // let str = 'http://x\'x.com' + " / / " + '/"/"/'; // if (name) { // console.log("His name is:", name); // console.log("Unusual situation, characters of // in quotation marks."); // } function removeComments(codes) { let {replacedCodes, matchedObj} = replaceQuotationMarksWithForwardSlash(codes); replacedCodes = replacedCodes.replace(/\s*\/\/.*$/mg, ''); Object.keys(matchedObj).forEach(k => { replacedCodes = replacedCodes.replace(k, matchedObj[k]); }); return replacedCodes; function replaceQuotationMarksWithForwardSlash(codes) { let matchedObj = {}; let replacedCodes = ''; let regQuotation = /(?***補充一點，單雙引號雖然也可以多行顯示，但其解析后實際是單行的。
let codes = "' \ Wmaker \ '"; codes.match( /(?2 多行注釋
??！難點已經(jīng)解決，現(xiàn)在就可以悠哉悠哉的往前推進了。
多行注釋與單行思路相同，只需在刪除注釋時多加一個匹配模式。中和兩者的最終代碼如下。
let codes = ` let name = "Wmaker"; // This is name. let str = 'http://x\\'x.com' + " / / " + '/"/"/'; // '; // " " let str = 'http://x\\'x./*a*/com' + " / / " + '/"/"/'; // '; // "/*sad*/ " if (name) { // Print name. /* Print name. */ console.log("His name is:", name); console.log("Unusual situation, characters of // in quotation marks."); /* * Others test. */ console.log("Unusual situation, characters of /* abc */ in quotation marks."); } `; console.log(removeComments(codes)); // 打印出： // let name = "Wmaker"; // let str = 'http://x\'x.com' + " / / " + '/"/"/'; // let str = 'http://x\'x./*a*/com' + " / / " + '/"/"/'; // if (name) { // console.log("His name is:", name); // console.log("Unusual situation, characters of // in quotation marks."); // console.log("Unusual situation, characters of /* abc */ in quotation marks."); // } function removeComments(codes) { let {replacedCodes, matchedObj} = replaceQuotationMarksWithForwardSlash(codes); replacedCodes = replacedCodes.replace(/(\s*\/\/.*$)|(\s*\/\*[\s\S]*?\*\/)/mg, ''); Object.keys(matchedObj).forEach(k => { replacedCodes = replacedCodes.replace(k, matchedObj[k]); }); return replacedCodes; function replaceQuotationMarksWithForwardSlash(codes) { let matchedObj = {}; let replacedCodes = ''; let regQuotation = /(?“如何用javascript正則實現(xiàn)移除注釋”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
當前標題：如何用javascript正則實現(xiàn)移除注釋
標題路徑：http://m.jiaotiyi.com/article/gcodjg.html