如何根據區分大小寫的文本匹配過濾和突出顯示 JSON 對象的動態嵌套數組中的文本

Question

我得到一個包含 JSON 個對象的動態嵌套級別數組，JSON 個對象的鍵屬性每次都是動態的。 我需要在動態JSON object中高亮搜索關鍵字匹配文本記錄。搜索文本包含敏感信息。 它應該搜索並處理 JSON 個對象的嵌套級別動態數組的所有類型，並且需要計算匹配記錄的總數。

我需要將 JSON 中的匹配字符串替換為粗體字符，並且需要顯示匹配的文本計數。 如果搜索“welcome”關鍵字，它應該被替換為welcome ，如果搜索“Ma”，它應該搜索“ma”文本並在所有匹配的地方替換為ma 。 這將不區分大小寫。 如果我執行上述機制，那么我可以輕松解析 JSON 標簽值，使用 react html-react-parser，這將處理樣式。

一個句子可以有多個匹配詞，需要高亮那些匹配的char詞，需要顯示從整個JSON開始的總匹配數。

下面添加了示例動態 JSON 數據。

[
   {
      "businessEntityName":{
         "businessEntityName":"abc1 ",
         "businessEntityDescription":"welcome to the abcd"
      },
      "name":"Paul",
      "applicationName":{
         "applicationRoleOrGroupName":"view",
         "applicationRoleOrGroupDescription":"Viewers on view"
      },
      "status":{
         "name":"Removed on: 27-Aug-2020",
         "style":"error"
      },
      "type":"Manager"
   },
   {
      "businessEntityName":{
         "businessEntityName":"Internal",
         "businessEntityDescription":"Okay"
      },
      "name":"John Smith",
      "applicationRoleOrGroupName":{
         "applicationRoleOrGroupName":"Master mass",
         "applicationRoleOrGroupDescription":"Can access read only information of the non-sensitive pages"
      },
      "status":{
         "name":"Active from: 26-Aug-2020",
         "style":"success"
      },
      "type":"admin"
   },
   {
      "businessEntityName":{
         "businessEntityName":"External",
         "businessEntityDescription":"All my Data"
      },
      "name":"ramesh",
      "applicationRoleOrGroupName":{
         "applicationRoleOrGroupName":"welcome",
         "applicationRoleOrGroupDescription":"User for My data"
      },
      "status":{
         "name":"Active from: 18-Aug-2020",
         "style":"success"
      },
      "type":"HOD"
   }
]

如果我在上面的 JSON 中搜索“ma”關鍵字，則預期的 output 應該如下所示

匹配結果總數為 4

[
   {
      "businessEntityName":{
         "businessEntityName":"abc1 ",
         "businessEntityDescription":"welcome to the abcd"
      },
      "name":"Paul",
      "applicationName":{
         "applicationRoleOrGroupName":"view",
         "applicationRoleOrGroupDescription":"Viewers on view"
      },
      "status":{
         "name":"Removed on: 27-Aug-2020",
         "style":"error"
      },
      "type":"<strong>Ma</strong>nager"
   },
   {
      "businessEntityName":{
         "businessEntityName":"Internal",
         "businessEntityDescription":"Okay"
      },
      "name":"John Smith",
      "applicationRoleOrGroupName":{
         "applicationRoleOrGroupName":"<strong>Ma</strong>ster <strong>ma</strong>ss",
         "applicationRoleOrGroupDescription":"Can access read only infor<strong>ma</strong>tion of the non-sensitive pages"
      },
      "status":{
         "name":"Active from: 26-Aug-2020",
         "style":"success"
      },
      "type":"admin"
   },
   {
      "businessEntityName":{
         "businessEntityName":"External",
         "businessEntityDescription":"All my Data"
      },
      "name":"ramesh",
      "applicationRoleOrGroupName":{
         "applicationRoleOrGroupName":"welcome",
         "applicationRoleOrGroupDescription":"User for My data"
      },
      "status":{
         "name":"Active from: 18-Aug-2020",
         "style":"success"
      },
      "type":"HOD"
   }
] 

Answer 1

虛擬解決方案可能是這樣的：

const boldify = (str, search) => {
  const reg = new RegExp(search, "ig");
  return str.replace(reg, (a) => `<strong>${a}</strong>`);
};

const convertedToTextJSON = JSON.stringify(myJSON);
const count = convertedToTextJSON.split(new RegExp(search)).length - 1;
const newJSON = JSON.parse(boldify(convertedToTextJSON, search))