CODEWITHSUNDEEP
javascriptreactjsjsx
uber
uber

Reputation: 5073

How to add html elements to a string and display them?

I have the following string, Today is a beautiful day and a substring with a start: 3 and end: 20 properties index to form ay is a beautiful . note the whitespace in the substring.

What I'm trying to accomplish is render the string dynamically with its substring in bold, like this:

Today is a beautiful day

Which I'm imagining would go somewhat like what I've tried, by manipulating the string and adding <b> in it: Tod<b>ay is a beautiful </b> day, which will only return a string showing the <b>

I also tried returning an html element with the string between tags: <h1> Tod{bold sentence}day </h1> which makes it too complicated to merge a separated word and, manage whitespaces.

Upvotes: 0

Views: 695

Answers (3)

Hao Wu
Hao Wu

Reputation: 20669

You can create a useMemo function to generate such a jsx structure:

import { useState, useMemo } from "react";

export default function App() {
  const [text, setText] = useState("Today is a beautiful day");
  const [[start, end], setRange] = useState([3, 20]);

  const paragraph = useMemo(() => (
    <p>
      <span>{text.substring(0, start)}</span>
      <strong>{text.substring(start, end + 1)}</strong>
      <span>{text.substring(end + 1)}</span>
    </p>
  ),[text, start, end]);

  return (
    <div className="App">{paragraph}</div>
  );
}

Check the codesandbox example

Upvotes: 1

DecPK
DecPK

Reputation: 25398

using map and innerHTML

const str = "Today is a beautiful day";

function makeStrongDynamically(str, start, end) {
  const res = str
    .split("")
    .map((s, i) => {
      if (i === start) return `<b>${s}`;
      else if (i === end) return `${s}</b>`;
      else return s;
    })
    .join("");
  return res;
}

const innerHTML = makeStrongDynamically(str, 3, 20);
const element = document.querySelector(".str-attached");
element.innerHTML = innerHTML;
<div class="str-attached"></div>

Using substring

const str = "Today is a beautiful day";

function makeStrongDynamically(str, start, end) {
  const before = str.substring(0, start);
  const center = str.substring(start, end + 1);
  const after = str.substring(end + 1);

  return `${before}<b>${center}</b>${after}`;
}

const innerHTML = makeStrongDynamically(str, 3, 20);
const element = document.querySelector(".str-attached");
element.innerHTML = innerHTML;
<div class="str-attached"></div>

Upvotes: 1

Yadab
Yadab

Reputation: 1883

You can do something like this. I have done this in javascript.

const startIndex = 3;
const endIndex = 20;
const myString = 'Today is a beautiful day';

const mySubString = myString.substring(3, 20);
const startString = myString.substring(0, startIndex);
const endString = myString.substring(endIndex, myString.length)



console.log(startString + "<strong>" + mySubString + "</strong>" + endString);

if you want to render in reactjs then use below.

{`${startString}<strong>${mySubString}</strong>${endString}`}

Upvotes: 0

Related Questions