如何用javascript正則實現移除注釋

本篇內容介紹了“如何用javascript正則實現移除注釋”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

1 單行注釋

單行注釋要么占據一整行，要么處于某一行的***。

正常情況下不難，直接通過正則匹配，再用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);  // }

如果在字符串中出現完整的URL地址，上面的正則會直接匹配而將其刪除。網上大多會將URL的格式特征（http://xxx）：雙下劃線前面有冒號，作為解決途徑加以利用。但這只是治標不治本的做法，畢竟//以任何形式出現在字符串中是它的自由，我們無從干涉。

這樣問題就轉變成：如何使正則匹配存在于引號外的雙下劃線？

想匹配被引號包圍，帶有雙下劃線的代碼塊比較簡單：/".*\/\/.*"/mg。難點在于如何實現這個否定，即當正則匹配到雙下劃線后，再判斷其是否在引號里面？絞盡腦汁，也上網查了很多，都沒有像樣的結果。靜心平氣，洗把臉刷刷牙再沖個頭冷靜之后，覺得單純使用正則的路已經走不通了，得跳出這個圈。

就在***關頭，在那淫穢污濁的房間上方突然光芒萬丈。我急忙護住了充滿血絲的眼睛，靜待其適應后定睛一看。只見那里顯現出了一段文字（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  // }    // 現在的方式。  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 };    }  }

是的，目標達成了，老天眷顧啊！

另外，有一個需要優化的地方：定義字符串的方式有三種 ' " ` ，目前我們只匹配了雙引號。

為了避免正則的記憶功能，都使用了正則字面量進行測試。

--- 之前

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

啊！問題到此結束了！

真的結束了嗎？不！我看了看時間：02:17，然后將眼鏡摘下，扯了張紙巾，拭去了幾顆淚水。

以下是接連解決的兩個問題：貪婪模式和轉義字符。

--- 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，由定義字符串時其中的轉義字符導致。 let codes = `   let str = 'http://x\\'x.com'; // 'acs `; console.log( codes.match(/('|"|`).*?\/\/.*?\1/mg) ); // ["'http://x\'", "'; // '"]  -- 解決  let reg = /(?<!\\)('|"|`).*?\/\/.*?(?<!\\)\1/mg; let codes = `   let str = 'http://x\\'x.com'; // 'acs `; console.log( codes.match(reg) ); // ["'http://x\'x.com'"]

事情到這里，雖然勞累，但多少有些成就感，畢竟成功了。

可是，可是，可是在測試時，竟然無意間發現一個無法逾越的障礙。就好比費勁千辛萬苦花費無盡的財力物力之后，某某尤物終于愿意一同去情人旅館時，卻發現家家爆滿，沒有空余的房間。在強裝歡笑，玩命的哄騙著她，一家接連一家的尋找直到終于定到房間后，卻發現自己已然挺不起來了！

正則會將任意位置的引號作為查找的起始位置，它不在乎引號是成雙的道理。下面是一個示例。

let reg = /(?<!\\)('|"|`).*?\/\/.*?(?<!\\)\1/mg;  let codes = `    let str = "abc"; // "  `;  console.log( codes.match(reg) ); // [""abc"; // ""]

不過，問題好歹在補過覺之后的 06:37 時得以解決。

思路是這樣的：雖然不能正確實現匹配帶有//被引號包圍的代碼塊（可能有方法，但能力有限），但是簡化成匹配單純被引號包圍的代碼塊，是簡單而且能正確做到的，雖然耗費的內存多了一些。另外，兩引號間也可能包含換行符，所以為其增加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 = /(?<!\\)('|"|`).*?(?<!\\)\1/smg;      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 };    }  }

***補充一點，單雙引號雖然也可以多行顯示，但其解析后實際是單行的。

let codes = "' \    Wmaker \  '";  codes.match( /(?<!\\)('|"|`).*?(?<!\\)\1/smg ); // ["'   Wmaker '"]

2 多行注釋

啊！難點已經解決，現在就可以悠哉悠哉的往前推進了。

多行注釋與單行思路相同，只需在刪除注釋時多加一個匹配模式。中和兩者的最終代碼如下。

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 = /(?<!\\)('|"|`).*?(?<!\\)\1/smg;      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 };    }  }

“如何用javascript正則實現移除注釋”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！