xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

How to use regular expression to match a special meta tag in html string using javascript All In One

How to use regular expression to match a special meta tag in html string using javascript All In One

meta tag

error ❌

const html = `
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="twitter:card" content="summary"/>
    <meta name="twitter:title" content="My Favorite Girlfriend"/>
    <meta name="twitter:site" content="@Hulu"/>
  </head>
</html>
`;

// regex groups
const result = [];
// html.match(/(^<meta name="twitter:url" content="[.]+"\/>$)/ig, (group) => {
// html.match(/(^<meta name="twitter:url" content="[\w+\s*]+"\/>$)/ig, (group) => {
// html.matchAll(/(^<meta name="twitter:url" content="([\w+\s?]+)"\/>$)/ig, (group) => {
html.matchAll(/(^<meta name="twitter:url" content="[\w+\s?]+"\/>$)/ig, (group) => {
  result.push(group);
});

console.log(`result`, result);

image

https://regexper.com/#%2F(^<meta name%3D"twitter%3Aurl" content%3D"[\w%2B\s%3F]%2B"\%2F>%24)%2Fig

solution ✅

const html = `
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="twitter:card" content="summary"/>
    <meta name="twitter:title" content="My Favorite Girlfriend"/> ✅
    <meta name="twitter:site" content="@Hulu"/>
    <meta name="twitter:description" content="A chef&#x27;s life gets complicated when he falls for a beautiful young woman who has multiple personalities."/>
    <meta property="og:title" content="My Favorite Girlfriend"/> ✅
    <meta property="og:site_name" content="Hulu"/>
    <meta property="og:type" content="movie"/>
  </head>
</html>
`;

// ✅
// let result = html.match(/<meta name="twitter:title" content="([^"]+)"\/>/)
// ✅
// let result = html.match(/<meta name="twitter:title" content="([\w+\s?]+)"\/>/)
// let result = html.match(/<meta name="twitter:title" content="([\w+\s?]+)"\/>/)[0]
let result = html.match(/<meta name="twitter:title" content="([\w+\s?]+)"\/>/)[1]

console.log(`result =`, result);
// result = My Favorite Girlfriend



// ❌
// const result = [];
// html.matchAll(/<meta name="twitter:title" content="([\w+\s?]+)"\/>/g, (group, i) => {
//   console.log(`group, i`, group, i)
//   result.push(group);
// })

// console.log(`result =`, result);

image

https://regexper.com/#%2F<meta name%3D"twitter%3Atitle" content%3D"([\w%2B\s%3F]%2B)"\%2F>%2F

image

https://regex101.com/r/QnWceA/1

image

demos

match

match(regexp)

const paragraph = 'The quick brown fox jumps over the lazy dog. It barked.';
const regex = /[A-Z]/g;
const found = paragraph.match(regex);

console.log(found);
// Array ["T", "I"]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match

matchAll

matchAll(regexp)

// matchAll 使用错误，没有 callback 方法 ⚠️

const regexp = /foo[a-z]*/g;
const str = "table football, foosball";
const matches = str.matchAll(regexp);

for (const match of matches) {
  console.log(
    `Found ${match[0]} start=${match.index} end=${
      match.index + match[0].length
    }.`,
  );
}

// matches iterator is exhausted after the for...of iteration Call matchAll again to create a new iterator
Array.from(str.matchAll(regexp), (m) => m[0]);
// (2) ['football', 'foosball']

image

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll

Array.from

Array.from(arrayLike)
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)

console.log(Array.from('foo'));
//  Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], (x) => x + x));
// Array [2, 4, 6]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

regex tools

  1. Regexper

https://regexper.com/#%2F^<meta name%3D"twitter%3Aurl" content%3D"([\w%2B\s%3F]%2B)"\%2F>%24%2Fig

image

  1. regex101

build, test, and debug regex

https://regex101.com/

元字符（Metacharacter）是拥有特殊含义的字符：

元字符 描述
. 查找单个字符，除了换行\r和行结束符\n。
\w 查找单词字符: 数字、字母及下划线。
\W 查找非单词字符。
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B 匹配非单词边界。
\0 查找 NULL 字符。
\n 查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\v 查找垂直制表符。
\xxx 查找以八进制数 xxx 规定的字符。
\xdd 查找以十六进制数 dd 规定的字符。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

https://www.runoob.com/jsref/jsref-obj-regexp.html

. / regex dot

https://www.runoob.com/jsref/jsref-regexp-dot.html

refs

https://stackoverflow.com/questions/77338957/how-to-use-regular-expression-to-match-a-special-meta-tag-in-html-string-using-j#

https://stackoverflow.com/questions/590747/using-regular-expressions-to-parse-html-why-not

https://www.cnblogs.com/xgqfrms/p/17780326.html

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

posted @   xgqfrms  阅读(9)  评论(0)  编辑  收藏  举报
相关博文：
· JavaScript regular expression in Actions All In One
· js RegExp test bug All In One
· 写个方法找出页面中除了数字和英文字母外的所有特殊特号
· 27. JS RegExp（正则表达式）对象
· js RegExp汇总
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）
历史上的今天：
2022-10-22 TypeScript infer keyword All In One
2021-10-22 js 循环多次和循环一次的时间的性能对比 All In One
2020-10-22 使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序
2020-10-22 使用 js 实现一个简易版的动画库
2020-10-22 使用 js 实现一个简易版的 drag & drop 库
2020-10-22 使用 js 实现一个简易版的 async 库
2020-10-22 js 运算符的执行顺序
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛