JavaScript >> Javascript 文檔 >  >> JavaScript

在 JavaScript 中匹配嵌套結構,第 2 部分

當我前幾天發布我的 matchRecursive 函數(它允許輕鬆匹配嵌套結構)時,我注意到它可以很容易地修改為使用正則表達式模式而不是字符串作為 format 爭論。再次查看後,我意識到轉換不會完全簡單,所以我繼續將其重新實現為 matchRecursiveRegExp 使用正則表達式格式分隔符。您現在可以使用它來喜歡,例如matchRecursiveRegExp(str, "<div\\b[^>]*>", "</div>", "gi") 匹配所有最外層<div>的全部內容 標籤。

和以前一樣,閱讀代碼註釋以獲取更多詳細信息。請注意,在這個版本中,為了減小代碼大小,我使變量名稱或多或少難以辨認,因此請參閱早期函數以獲得類似但更易讀的實現。

// (c) 2007 Steven Levithan <stevenlevithan.com>
// MIT License

/*** matchRecursiveRegExp
	Accepts a string to search, a left and right format delimiter
	as regex patterns, and optional regex flags. Returns an array
	of matches, allowing nested instances of left/right delimiters.
	Use the "g" flag to return all matches, otherwise only the
	first is returned. Be careful to ensure that the left and
	right format delimiters produce mutually exclusive matches.
	Backreferences are not supported within the right delimiter
	due to how it is internally combined with the left delimiter.
	When matching strings whose format delimiters are unbalanced
	to the left or right, the output is intentionally as a
	conventional regex library with recursion support would
	produce, e.g. "<<x>" and "<x>>" both produce ["x"] when using
	"<" and ">" as the delimiters (both strings contain a single,
	balanced instance of "<x>").

	examples:
		matchRecursiveRegExp("test", "\\(", "\\)")
			returns: []
		matchRecursiveRegExp("<t<<e>><s>>t<>", "<", ">", "g")
			returns: ["t<<e>><s>", ""]
		matchRecursiveRegExp("<div id=\"x\">test</div>", "<div\\b[^>]*>", "</div>", "gi")
			returns: ["test"]

*/
function matchRecursiveRegExp (str, left, right, flags) {
	var	f = flags || "",
		g = f.indexOf("g") > -1,
		x = new RegExp(left + "|" + right, "g" + f),
		l = new RegExp(left, f.replace(/g/g, "")),
		a = [],
		t, s, m;

	do {
		t = 0;
		while (m = x.exec(str)) {
			if (l.test(m[0])) {
				if (!t++) s = x.lastIndex;
			} else if (t) {
				if (!--t) {
					a.push(str.slice(s, m.index));
					if (!g) return a;
				}
			}
		}
	} while (t && (x.lastIndex = s));

	return a;
}

你可以在這裡下載。

如果您希望看到任何其他功能,請告訴我。


Tutorial JavaScript 教程
  1. 給想要學習 JavaScript 的人的一封信

  2. putImageData 比 drawImage 快嗎?

  3. 使用 Xray 抓取網站

  4. 如何使用 CSS 偽元素構建 UI 元素

  5. #codevember - 7 - 黑洞 - 由 tsParticles 製成

  6. Mesfix 的 L4/高級開發人員

  7. JavaScript 似乎做浮點錯誤(與 C 相比)

  1. 為什麼我的狀態沒有更新? - React Hooks 版本

  2. 初學者編碼路線圖。

  3. 使用 Vercel CLI 和 Vercel GitHub 集成部署 Next.js 10

  4. Javascript [數組] 方法

  5. 使用 Raspberry Pi、NodeJS 和 Pir 傳感器構建監控系統

  6. React 和 React Native 項目模板嚮導

  7. 你如何正確地從 Promise 返回多個值?

  1. 我創建了一個簡單乾淨的橫幅生成器🖼️

  2. 使用 NodeJS、AWS Lambda 和 Locust 的無服務器公寓網絡爬蟲

  3. 您需要狀態管理庫嗎?

  4. 如何使用 HTML 和 CSS 製作 Google 登錄表單設計