插入在標頭後
我們有一個包含 HTML 文件的字串。
撰寫一個正規表示式，在 <body> 標籤後立即插入 <h1>Hello</h1>。此標籤可能具有屬性。
例如
let regexp = /your regular expression/;
let str = `
<html>
<body style="height: 200px">
...
</body>
</html>
`;
str = str.replace(regexp, `<h1>Hello</h1>`);之後 str 的值應該是
<html>
<body style="height: 200px"><h1>Hello</h1>
...
</body>
</html>若要插入在 <body> 標籤後，我們必須先找到它。我們可以使用正規表示式模式 <body.*?> 來執行此操作。
在此任務中，我們不需要修改 <body> 標籤。我們只需要在它之後新增文字。
以下是如何執行此操作
let str = '...<body style="...">...';
str = str.replace(/<body.*?>/, '$&<h1>Hello</h1>');
alert(str); // ...<body style="..."><h1>Hello</h1>...在替換字串中，$& 表示比對本身，也就是原始文字中對應到 <body.*?> 的部分。它會被它自己加上 <h1>Hello</h1> 取代。
另一種方法是使用後向參照
let str = '...<body style="...">...';
str = str.replace(/(?<=<body.*?>)/, `<h1>Hello</h1>`);
alert(str); // ...<body style="..."><h1>Hello</h1>...如你所見，這個正規表示法中只有後向參照的部分。
它的運作方式如下
- 在文字中的每個位置。
- 檢查它是否由
<body.*?>前置。 - 如果是，那麼我們就有了比對。
標籤 <body.*?> 就不會被傳回。這個正規表示法的結果從字面上來說是一個空字串，但它只比對由 <body.*?> 前置的位置。
所以它會將由 <body.*?> 前置的「空行」替換為 <h1>Hello</h1>。那是插入在 <body> 之後。
附註：正規表示法旗標，例如 s 和 i 也可能很有用：/<body.*?>/si。s 旗標讓句點 . 比對換行字元，而 i 旗標讓 <body> 也能不分大小寫地比對 <BODY>。