时间戳

首页 > 解决方案 > 如何根据文本匹配在区分大小写的情况下过滤和突出显示 JSON 对象的动态嵌套数组中的文本

javascript - 如何根据文本匹配在区分大小写的情况下过滤和突出显示 JSON 对象的动态嵌套数组中的文本

问题描述

我得到一个 JSON 对象的动态嵌套级别数组，JSON 对象键属性每次都是动态的。我需要在动态 JSON 对象中突出显示匹配文本记录的搜索关键字。搜索文本包含敏感信息。它应该搜索并适用于所有类型的 JSON 对象的嵌套级别动态数组，并且需要对匹配记录的总数进行计数。

我需要在 JSON 中用粗体字符替换匹配的字符串，并且需要显示匹配的文本计数。如果搜索“welcome”关键字，它应该被替换为welcome，如果搜索“Ma”，它应该搜索“ma”文本并在所有匹配的地方替换为ma。这将不区分大小写。如果我执行上述机制，那么我可以使用 react html-react-parser 轻松解析 JSON 标签值，这将处理样式。

一个句子可以有多个匹配词，需要突出显示那些匹配的字符词，并且需要显示整个 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”关键字，预期的输出应该如下

总匹配结果计数为 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"
   }
]

标签： javascriptjsonreactjsecmascript-6ecmascript-5

解决方案

虚拟解决方案可能如下：

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))

推荐阅读