JavaScript获取双中括号里的内容

目录

项目场景：

问题描述

原因分析：

解决方案：

---

项目场景：

今天给大家分享一下我踩的一个bug，需求是这样的现在有一个富文本框，要在里面输入一个填空题，填空题大家都知道答案肯定是填空的😂，所以说我们定义的规则是取双中括号里的内容为答案，例如：[[这里是答案]]，我们就要把双中括号里的内容取出来传给后端

---

问题描述

由上面的项目场景阐述后，我首先想到的方法是利用正则表达式去匹配，所以我最开始的写法是如下：

getFillAnswer(str) {
      const fillPat = new RegExp("\\[\\[(.*?)\\]\\]", "g");

      const arr = [];
      let execData = null;
      do {
        execData = fillPat.exec(str);
        if (execData && execData[1]) {
          arr.push(execData[1]);
        } else if (execData && !execData[1]) {
          // 错误处理
          return;
        }
      } while (execData);

      return arr;
    }

这样方法匹配正常的是可以匹配到双中括号里的内容，但是因为是填空题，所以答案中难免有中括号，例如：[[a[i]]]，这样的话匹配出来的内容只有a[i，所以具体错误的原因请看下面的原因分析 

---

原因分析：

这里我们用正则规定了前面两个和后面两个是中括号，但是中间的话我们这里用的是非贪婪模式匹配（非贪婪模式匹配就是尽可能小的去匹配），所以不管有多少个“ ] "，都会匹配最前面两个，所以无论是[[a[i]]]]]]]]]]多少个]，最后都只会匹配出a[i，我们想要的效果是[[a[i]]]匹配出来的是a[i],这里如过使用贪婪模式的话就只能匹配出一个，并不是我们想要的，所以这样不可以行

---

解决方案：

既然正则表达式行不通，那我们就换一条路，富文本框给我们返回的是一个带有html标签的字符串，所以我们就可以针对于字符串就行切割取舍，我的思路是：前面两个中括号是从前往后按顺序取，后面两个中括则把字符串倒置过来，然后从后往前按逆序取，去之后，则切掉取走的部分之前的，依次按这个方法惊醒分割取舍，具体实现代码如下：

function reverseStr(value) {
  let newStr = '';
  for (let i = 0; i < value.length; i++) {
    let s = value.charAt(value.length - 1 - i)
    newStr += s;
  }

  return newStr;
}

const str = '这里是测试代码1[[a[i]【o]]]这里是测试代码2[[[asdasd]asdasda[asdasd]]]';

const extractContent = (value) => {
  const result = [];
  let message = value

  do {
    console.log("前"+message);

    let reverseStrs = reverseStr(message)
    console.log("reverseStrs"+reverseStrs);

    const start = message.indexOf('[[');
    console.log(start+"start");
    if (start === -1) break;

    const end = reverseStrs.lastIndexOf(']]');
    console.log("end"+end);
    if (end === -1) break;

    
    const content = message.substring(start + 2, message.length-end-1);
    console.log("content:"+content);

    message = message.substring(message.length-end+1);
    console.log("后"+message);
    result.push(content);
  } while(message.length>0)
  console.log("result"+result);
  return result;
};

const extractedContent = extractContent(str);
console.log(extractedContent);

这里是我单独写的测试代码，具体使用场景拿过去直接用就可以

希望这一期的分享也会帮助大家解决一下烦恼～～