Escape html data inside JSON string using PHP or WordPress

Question

I have table in which the values are stored in the JSON format.

{"0":{"panel-1":{"type":"panel","panel_width":["700",320],"map_style":{"0":{"parameter":"width","unit":"px","name":"panel_width"},"1":{"parameter":"height","unit":"px","name":"panel_height"},"2":{"parameter":"inherit_bg","name":"inherit_bg_prop"},"3":{"parameter":"background_type","name":"background_type"},"4":{"parameter":"lighten_color","name":"panel_lighter_color"},"5":{"parameter":"darken-color","name":"panel_darker_color"},"6":{"parameter":"gradient_lighter_location","name":"gradient_lighter_location"},"7":{"parameter":"gradient_darker_location","name":"gradient_darker_location"},"8":{"parameter":"panel_gradient_type","name":"panel_gradient_type"},"9":{"parameter":"radial_gradient_direction","name":"radial_panel_gradient_direction"},"10":{"parameter":"gradient_angle","name":"gradient_angle"},"11":{"parameter":"background-color","name":"panel_background_color"},"12":{"parameter":"background-image","name":"panel_bg_image"},"13":{"parameter":"background_opt","name":"opt_bg"},"14":{"parameter":"panel_img_overlay_color","name":"panel_img_overlay_color"},"15":{"parameter":"overlay-gradient-type","name":"overlay_gradient_type"},"16":{"parameter":"overlay_lighter_color","name":"overlay_lighter_color"},"17":{"parameter":"overlay_lighter_location","name":"overlay_lighter_location"},"18":{"parameter":"overlay-darker-color","name":"overlay_darker_color"},"19":{"parameter":"overlay_darker_location","name":"overlay_darker_location"},"20":{"parameter":"overlay_panel_gradient_type","name":"overlay_panel_gradient_type"},"21":{"parameter":"radial_overlay_gradient_direction","name":"radial_overlay_gradient_direction"},"22":{"parameter":"overlay_gradient_angle","name":"overlay_gradient_angle"},"23":{"parameter":"overlay-color","name":"panel_overlay_color"},"24":{"parameter":"entry_animation","name":"panel_entry_animation"},"25":{"parameter":"border-style","name":"panel_border_style"},"26":{"parameter":"border-color","name":"panel_border_color"},"27":{"parameter":"border-width","name":"panel_border_width"},"28":{"parameter":"border-radius","name":"panel_border_radius"},"29":{"parameter":"box-shadow","name":"panel_box_shadow"},"30":{"parameter":"mobile-breakpoint","name":"cp_mobile_br_point"}},"panel_height":["400",480],"inherit_bg_prop":"1","background_type":["color"],"panel_lighter_color":["#fff"],"panel_darker_color":["#ddd"],"gradient_lighter_location":["0"],"gradient_darker_location":["100"],"panel_gradient_type":["lineargradient"],"radial_panel_gradient_direction":["center_center"],"gradient_angle":["180"],"panel_background_color":["#fff"],"panel_bg_image":["0|modules/img/grey.png"],"opt_bg":["repeat|center|contain"],"panel_img_overlay_color":["rgba(0,0,0,0.12)"],"overlay_gradient_type":"color","overlay_lighter_color":"rgba(255,255,255,0.9)","overlay_lighter_location":"0","overlay_darker_color":"rgba(221,221,221,0.9)","overlay_darker_location":"100","overlay_panel_gradient_type":"lineargradient","radial_overlay_gradient_direction":"center_center","overlay_gradient_angle":"180","panel_overlay_color":"rgba(0,0,0,0.8)","close_overlay_click":"1","panel_entry_animation":"cp-fadeIn","panel_border_style":"none","panel_border_color":"#e1e1e1","panel_border_width":"1|1|1|1|px|1","panel_border_radius":"3|3|3|3|px|1","panel_box_shadow":"type:none|horizontal:0|vertical:0|blur:5|spread:0|color:rgba(86,86,131,0.6)","shadow_type":"none","cp_mobile_br_point":"767"},"form_field":{"type":"form_field","form_field_font":"inherit:inherit","map_style":{"0":{"parameter":"font-family","name":"form_field_font"},"1":{"parameter":"font-size","unit":"px","name":"form_field_font_size"},"2":{"parameter":"letter-spacing","name":"form_field_letter_spacing"},"3":{"parameter":"text-align","name":"form_field_text_align"},"4":{"parameter":"color","name":"form_field_color"},"5":{"parameter":"color","target":"placeholder","name":"form_field_placeholder_color"},"6":{"parameter":"background-color","name":"form_field_bg_color"},"7":{"parameter":"border-style","name":"form_field_border_style"},"8":{"parameter":"border-width","name":"form_field_border_width"},"9":{"parameter":"border-radius","name":"form_field_border_radius"},"10":{"parameter":"border-color","name":"form_field_border_color"},"11":{"parameter":"active-border-color","name":"form_field_active_border_color"},"12":{"parameter":"box-shadow","name":"form_field_box_shadow"},"13":{"parameter":"padding","name":"form_field_padding"}},"form_field_font_size":["13"],"form_field_letter_spacing":["0"],"form_field_text_align":["left"],"form_field_color":"#666","form_field_placeholder_color":"#666","form_field_bg_color":"#fff","form_field_border_style":"solid","form_field_border_width":"1|1|1|1|px|1","form_field_border_radius":"1|1|1|1|px|1","form_field_border_color":"#bbb","form_field_active_border_color":"#666","form_field_box_shadow":"type:none|horizontal:0|vertical:0|blur:5|spread:0|color:rgba(86,86,131,0.6)","shadow_type":"none","form_field_padding":["0|10|0|10|px|0"]},"cp_email-2":{"position":[{"x":235,"y":60.5,"right":"no","bottom":"no"}],"layerindex":2,"map_style":{"3":{"name":"field_animation","parameter":"removeAnimClass","onhover":false,"target":".cp-field-html-data","unit":"data-anim-class"},"6":{"name":"width","parameter":"width","onhover":false,"target":false,"unit":"px"},"7":{"name":"height","parameter":"height","onhover":false,"target":false,"unit":"px"}},"map":{"0":{"name":"email_text_placeholder","attr":"placeholder","target":".cp-target"},"1":{"name":"label_as_placeholder","attr":"label-as-placeholder","target":".cp-target"},"2":{"name":"required","attr":"required","target":".cp-target"},"3":{"name":"field_animation","attr":"data-anim-class","target":".cp-field-html-data"},"4":{"name":"field_animation_delay","attr":"data-anim-delay","target":".cp-field-html-data"},"5":{"name":"field_animation_duration","attr":"data-anim-duration","target":".cp-field-html-data"}},"type":"cp_email","email_text_placeholder":"Email","label_as_placeholder":"true","required":"true","field_animation":"cp-none","field_animation_delay":"0ms","field_animation_duration":"1000ms","width":["230"],"height":["45"]},"cp_textarea-2":{"position":[{"x":235,"y":128.5,"right":"no","bottom":"no"}],"layerindex":3,"map_style":{"4":{"name":"textarea_padding","parameter":"padding","onhover":"","target":".cp-target","unit":"px"},"7":{"name":"width","parameter":"width","onhover":false,"target":false,"unit":"px"},"8":{"name":"height","parameter":"height","onhover":false,"target":false,"unit":"px"}},"map":{"0":{"name":"input_text_name","attr":"name","target":".cp-target"},"1":{"name":"input_text_placeholder","attr":"placeholder","target":".cp-target"},"2":{"name":"label_as_placeholder","attr":"label-as-placeholder","target":".cp-target"},"3":{"name":"required","attr":"required","target":".cp-target"},"4":{"name":"field_animation","attr":"data-anim-class","target":".cp-field-html-data"},"5":{"name":"field_animation_delay","attr":"data-anim-delay","target":".cp-field-html-data"},"6":{"name":"field_animation_duration","attr":"data-anim-duration","target":".cp-field-html-data"}},"type":"cp_textarea","input_text_name":"textarea_2534","input_text_placeholder":"Enter message here","label_as_placeholder":"true","required":"false","field_animation":"cp-none","field_animation_delay":"0ms","field_animation_duration":"1000ms","width":["230"],"height":["120"],"textarea_padding":"0|10|0|10|px|0"},"cp_checkbox-2":{"position":[{"x":235,"y":263.5,"right":"no","bottom":"no"}],"layerindex":4,"map_style":{"2":{"name":"checkbox_options","parameter":"checkbox-options","unit":"","onhover":false,"target":false},"4":{"name":"checkbox_orientation","parameter":"checkbox-orientation","onhover":false,"target":false,"unit":""},"5":{"name":"label_line_height","parameter":"line-height","onhover":false,"target":".cp-target","unit":""},"6":{"name":"field_animation","parameter":"removeAnimClass","onhover":false,"target":".cp-field-html-data","unit":"data-anim-class"},"9":{"name":"width","parameter":"width","onhover":false,"target":false,"unit":"px"},"10":{"name":"height","parameter":"height","onhover":false,"target":false,"unit":"px"}},"map":{"0":{"name":"checkbox_name","attr":"name","target":".cp-target"},"1":{"name":"input_text_placeholder","attr":"placeholder","target":".cp-target"},"3":{"name":"required","attr":"required","target":".cp-target"},"6":{"name":"field_animation","attr":"data-anim-class","target":".cp-field-html-data"},"7":{"name":"field_animation_delay","attr":"data-anim-delay","target":".cp-field-html-data"},"8":{"name":"field_animation_duration","attr":"data-anim-duration","target":".cp-field-html-data"}},"type":"cp_checkbox","checkbox_name":"checkboxfield_3472","input_text_placeholder":"Placeholder text"

,"checkbox_options":"<a href="dhjhsfjhdj">Option1</a>",

"required":"false","checkbox_orientation":"cp-vertical-orien","label_line_height":"1.5","field_animation":"cp-none","field_animation_delay":"0ms","field_animation_duration":"1000ms","width":["105"],"height":["85"]}}}

The value in checkbox_options is HTML and the HTML has the attribute which is not escaped. The JSON value is already saved in that format in database so I can not control the string but I can replace it or do something and insert it back with the Escaped Attribute.

Is there any way that I can insert it back with escaped attribute.

Also, when I try to json_decode it throws error.

Please need help. I'm struck. Can someone please help?

Answer 1

You can use Regex to find the bad JSON, PHP's preg_replace_callback will allow you to replace it with a callback where you can modify the string however you think is suitable.

So let's step through that

Regex to find everything between checkbox_options": and ",` which seem to be 2 guaranteed 'before' and 'after' strings. (tested on regexr)

$pattern = '(?<=checkbox_options\"\:\")(.*)(?=\"\,\`)';

Run preg_replace_callback against your bad json,

$goodJson = preg_replace_callback(
    $pattern,
    function ($matches) {
        return fixJson($matches[0]);
    },
    $malformedJson
);

Then we'll also need the function to fix your JSON which would be something like:

function fixJson($rawHtml) {
  return json_encode($rawHtml); // This section is incomplete
}

Please note I haven't implemented the fixJson logic, rather given you the framework to perform your own actions on it.