博客

js匹配两个特殊字符中间内容的正则以及html标签之间内容的匹配

  • Post author:
  • Post category:其他

匹配两个特殊字符

匹配两个特殊字符中间的内容，比如¥1234¥ 要匹配两个¥之间的数字：

// 使用正则
let reg = /(?<=¥).*?(?=¥)/;
let str = '¥1234¥';
// 使用
str.match(reg); // 输出 ['1234']

在这里插入图片描述
在这里不包含前面匹配的字符写法（?<=要匹配的开始字符），不包含后面要匹配的字符写法（?=要匹配的结束字符）

有了以上直接匹配特殊字符中间内容的方式，如果带上所要匹配的字符就更直接了

'¥1234¥'.match(/¥.*?(?=¥)/)[0]; // 输出 ¥1234

'¥1234¥'.match(/(?<=¥).*?¥/)[0]; // 输出 1234¥

'¥1234¥'.match(/¥.*?¥/)[0]; // 输出 ¥1234¥

不要觉得最后一种方式没有用的感觉，最后一种是在例如：

// 这样的字符串中抽离，以上其他方式一样，只是根据需要的结果使用就好
'das23213123¥1234¥dsaada31'.match(/¥.*?¥/)[0]; // 输出 ¥1234¥

匹配HTML标签之间的内容

有了上方匹配特殊字符的方式，直接将特殊字符改为html的标签即可，这里采用的单一标签的匹配方式，比如只匹配a标签或p标签等，话不多说上代码：

let dom = '<div><span>这个是内容一</span><span style="color: red;">这个是内容二</span></div>';
let domReg = /(?<=(<span[^>]*?>)).*?(?=(<\/span>))/g;
dom.match(domReg);

输出如下：
在这里插入图片描述
这是以span标签为例，你也可以将span改成其他标签，div，p标签等都可以。

批量处理匹配到的html内容

根据上边html的正则匹配，我们来对匹配到的内容做进一步的处理，经常会遇到要对某一种标签的内容增加修饰，比如将颜色统一改为绿色，代码如下：

let dom = '<div><span>这个是内容一</span><span style="color: red;">这个是内容二</span></div>';
let domReg = /(?<=(<span[^>]*?>)).*?(?=(<\/span>))/g;
dom = dom.replace(domReg, (str) => {
  console.log('正则匹配到的内容', str);
  return `<span style="color: green;">${str}</span>`;
});

完整代码实例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>JS匹配特殊字符之间的内容以及标签内容</h1>
  <div id="content"></div>
</body>
<script>
  let dom = '<div><span>这个是内容一</span><span style="color: red;">这个是内容二</span></div>';
  let domReg = /(?<=(<span[^>]*?>)).*?(?=(<\/span>))/g;
  dom = dom.replace(domReg, (str) => {
    console.log('正则匹配到的内容', str);
    return `<span style="color: green;">${str}</span>`;
  });
  document.getElementById('content').innerHTML = dom;

</script>

</html>

以上就是这次所分享内容。
如有疑问可以留言，也可以到QQ群一起探讨：
QQ群1: 657011407， QQ群2: 492593055，也可以到微信找我 shenzhipeng1023

版权声明：本文为jason_renyu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。