Unraveling markdown within a JSON document

I am currently working on an application that retrieves data from an API and displays it. However, I have run into a slight issue where some of the data includes markdown for italicizing text, like this:

[
{
"t": "a {it}dog{/it} who needs a loving home"
}
]

For the front end, I am using EJS templating language to render the data as follows:

<% if(sense[0][1].dt[1]){ 
const example = sense[0][1].dt[1][1][0].t; %>
<div class="col-12 sense-example-wrapper">
<p class="sense-example"><%= example %></p>
</div>
<% } %>

The content within {it} curly braces in the JSON data is stored in the variable <%= example %>

I am facing a challenge in styling the {it}dog{/it} (and all other occurrences of that markdown) as italic using CSS, but I am unsure how to achieve this. Despite my efforts to find a solution online, I have not been successful.

Thank you for your assistance.

P.S.: Please excuse any confusion in my explanation, as I am still relatively new to programming.

Answer №1

To make the necessary changes, simply substitute the correct strings with <i>text</i> = text

For instance:

const example = sense[0][1].dt[1][1][0].t; 
const formatted = example.replace(/{it}/ig, "<i>").replace(/{\/it}/ig, "</i>");

Then

<p class="sense-example"><%= formatted %></p>

Alternatively, without escaping the <> tags,

<p class="sense-example"><%- formatted %></p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to prevent my menu from switching to mobile view if it can fully fit within the menu area on the device?

I've implemented a code on my website that changes the menu to "mobile" when the device screen resolution is less than 1024px. However, I noticed that the menu still displays correctly even when the device is around 800px. Is there a way to adjust thi ...

What's the Deal with Angular's Conditional Views?

I recently inherited an Angular project that seems like a bit of a mess. While I'm not too familiar with Angular, I am confident in my understanding of MVC and believe I can learn what I need to. My current challenge involves a property of a JSON obje ...

What is the best way to ensure my component doesn't get hidden behind my NavBar when using react-scroll?

Currently, I am utilizing react-scroll for smooth navigation through four components. However, when I select a component from the NavBar, it scrolls that component to the top of the screen instead of aligning it with the bottom of the NavBar. To illustrate ...

Are there any portable stylus options available?

Hey there! I'm dealing with a situation where the computers at my school are locked down and I can't install software. Does anyone know if there's a way to compile my Stylus code without having to install Node first? Or perhaps, is there a p ...

Refreshing imported CSS in Spring with content versioning strategy for cache busting

After following a tutorial on using a content version strategy in Spring for static assets, everything is working correctly except for one corner case that I'm facing: Within my HTML, there is a <link> referencing a CSS file called a.css. Upon ...

How to use AngularJS NG-repeat to display only distinct values from a dataset in an ng-repeat directive

I have a project that involves working with JSON data to display information using BootStrap Tabs categorized by different categories. Sample JSON data: "result": [ { category: "A", price: "499.00", productName: "AAA", ...

Importing JSON data into a Django nested model structure

As a newcomer to Django, I find myself struggling with some concepts and unable to find a solution to my current challenge. I have successfully defined a multi-table model with models, views, admin, serializers, and URLs. It functions flawlessly when it c ...

What is the best way to handle error responses in a Rails API when returning JSON data?

Suppose... module Api module V1 class SessionsController < ApplicationController respond_to :json skip_before_filter :verify_authenticity_token def create @user = User.find_by(email: para ...

I would like the background image to perfectly fit the dimensions of the parent container

https://i.sstatic.net/PlCYU.png Is there a way to prevent the background image from overflowing and causing a horizontal scroll bar to appear? The layout of the page consists of two columns, with each column taking up 50% of the width. The left column con ...

Error is being returned by the JSONP callback

Looking to grasp JSONP. Based on my online research, I've gathered that it involves invoking a function with a callback. Other than that, is the way data is handled and the data format similar to JSON? I'm experimenting with JSONP as shown below ...

List is not considering the CSS class

The outcome is as expected: #container { display: flex; } #red_box { height: 30%; width: 30%; background-color: red; } <div id ="container"> <div id="red_box">a</div> <div id="blu_box">b</div> </d ...

Error displayed inline

I am facing an issue with a hidden textbox that I need to make visible based on a certain condition. Despite checking that the control is being triggered by the change event, I am unable to get it to display. I have experimented with different methods with ...

The Vega Lite specification is producing a blank graph even when data is included in the specification

The Vega lite specification is displaying an empty graph even though data is provided in the spec. The link contains the correct spec that results in an empty graph. I need assistance in identifying the issue. This graph is intended to be displayed as pa ...

Creating designs to cater to outdated web browsers, prioritizing backward compatibility

I am looking to synchronize my design for older browsers like IE7 and above. I have designed the layout specifically for these browsers, and after researching, I found a tool that uses Javascript to implement the code. Is there an alternative method to ach ...

The CSS ::after selector is experiencing a decrease in animation speed

There is a dropdown menu set to fade in once a link is clicked. Everything works well, the menu fades in properly. However, when clicking off and triggering a function that fades out the dropdown, the triangle on top of the box fades out slightly slower th ...

Unpredictable characters within CSS class titles

I've observed an interesting pattern on certain websites like tray.io, asana, and Facebook. When you inspect their CSS class names, you may come across random combinations of characters, such as: <header class="Header_XSDsdksdXKkSDD">..</Hea ...

Is there a way for me to view the specifics by hovering over a particular box?

Whenever I hover over a specific box, detailed information appears, and when I move the mouse away, the details disappear. HTML <nav> <div> <div class="nav-container"> <a href="./about.html" ...

Is there a way to continuously run jQuery code or reset it?

Can you help me create a loop that will continuously run this script after it finishes executing, repeating the process indefinitely? I want to keep running this code over and over again. This script is using jQuery version 3.5.1 // Title var title1 ...

Different ways to adjust the positioning of the HTML canvas created using p5.js

I am attempting to integrate the output canvas from p5.js into my webpage by following a tutorial heretutorial. I am hoping that the canvas will appear where I have positioned it within the HTML body. However, no matter what I try with CSS properties like ...

Troubleshooting a Pop-up Error and JSON Bug in an MVC Application

Within a JQuery Popup, I am utilizing multiple TextBox controls: <li id="lblAmountPerTurbine"> <label for="AmountPerTurbine"><strong>Amount Per Turbine:</strong></label> <%= Html.TextBox("Amo ...