正则如何完整匹配script标签的中间内容?

Question

PHP文件如下：

<script src="static/js/jsencrypt.js?v=<?= WEB_VERSION ?>"></script>
<script src="static/js/jquery.form.js?v=<?= WEB_VERSION ?>"></script>
<script type="text/javascript">
    var a = 1;
    var b = 2;
</script>

如何通过正则表达式捕获到script标签中间部分的内容,例如 第三个script标签内容为：

    var a = 1;
    var b = 2;

我自己写了的一段正则：/(<script\b[^>]*>)([\s\S]*?)(<\/script>)/gm
这段正则只能匹配script标签属性不插入>的情况，如果script标签属性插入了>就会匹配错误。

Answer 1

属性中含有引号就排除引号干扰

/(<script\b([^"<>]+|"[^"]*")*>)([\s\S]*?)(<\/script>)/g

Answer 2

如果是 Javascript 的话，建议使用 DOMParser 解析 html 字符串：

const htmlStr = `<script src="static/js/jsencrypt.js?v=<?= WEB_VERSION ?>"></script>
<script src="static/js/jquery.form.js?v=<?= WEB_VERSION ?>"></script>
<script type="text/javascript">
    var a = 1;
    var b = 2;
</script>`;

const parser = new DOMParser();

console.log(
  parser.parseFromString(htmlStr, "text/html")
        .querySelectorAll("script")[2]
    ?.innerHTML
);

    var a = 1;
    var b = 2;

Answer 3

/**
 * 获取html代码中指定标签名的内容
 * @param htmlStr html字符串
 * @param tagName 标签名称
 * @param isGetTagInnerContent 是否只获取标签内部的内容
 */
function getCodeByTagName (htmlStr, tagName, isGetTagInnerConten) {
  let reg = new RegExp(`<${tagName}[^>]*>([\\s\\S]*)<\\/${tagName}>`);
  if (isGetTagInnerContent) {
    reg = new RegExp(`(?<=<${tagName}[^>]*>)([\\s\\S]*)(?=<\/${tagName}>)`);
  }
  // console.log('reg', reg);
  let matched = htmlStr.match(reg);
  return matched ? matched[0] : '';
};


let str = `<script type="text/javascript">
    var a = 1;
    var b = 2;
</script>`;
// 输出：\n    var a = 1;\n    var b = 2;\n
console.log(getCodeByTagName(str, 'script', true));

Answer 4

一般来说script标签有内容的会标签会有type="text/javascript"那么可以:
(?<=<script.*type="text\/javascript".*>)([\s\S]*?)(?=\<\/script>)

js代码:

const regex = /(?<=<script.*type="text\/javascript".*>)([\s\S]*?)(?=\<\/script>)/gm;
const str = `
<script src="static/js/jsencrypt.js?v=<?= WEB_VERSION ?>"></script>
<script src="static/js/jquery.form.js?v=<?= WEB_VERSION ?>"></script>
<script type="text/javascript">
    var a = 1;
    var b = 2;
</script>
`;
let m;

while ((m = regex.exec(str)) !== null) {
    // 必须这样才能在零宽(位置)匹配时避免死循环
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    
    // 可以通过变量`m`获取结果
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}