CODEWITHSUNDEEP
javascriptreactjsobject
user13028341
user13028341

Reputation:

How to replace parts of a string with a react component multiple times?

How could I replace parts of the string again with another react component? Here's a theorical example, that doesn't work of course... But it's self explanatory

const text = "hello world";
const parts = text.split(" ");

temp1 = parts.map(part => {
  return part.match(/hello/) ?
          `<b>${part}</b>` :          
          part.match(/world/) ?
          `<i>${part}</i>`:
          part
})
text1 = `<div>${temp1.join(' ')}</div>`;

console.log(text1)

Result: <div><b>hello</b> <i>world</i></div>

Upvotes: 3

Views: 4934

Answers (2)

ramVermilion
ramVermilion

Reputation: 59

    const regex = <-any regex-!>
    const result =
        string.replaceAll(regex, "#$1#")
        .split("#")
        .map((v) => {
          return list.includes(value) ? (
            <>
              <Tooltip title={value}>
                <b>{value}</b>
              </Tooltip>
            </>
          ) : (
             value 
          );
        });

Split by some character(here '#') so that it wont affect other use cases of empty characters

Upvotes: 1

Alex L
Alex L

Reputation: 4241

Let's start without React and trying to break down what you are doing (I will use strings instead of jsx):

let text = "hello world";
let reg, parts;

reg = new RegExp(/hello/);
parts = text.split(reg);
temp1 = parts.map(part => part.match(reg) ? `<b>${part}</b>` : part)
text1 = `<div>${temp1}</div>`;

reg = new RegExp(/world/);
parts = text.split(reg);
temp2 = parts.map(part => part.match(reg) ? `<i>${part}</i>` : part)
text2 = `<div>${temp2}</div>`;

console.log(text1)
console.log(text2)
.as-console-wrapper { max-height: 100% !important; top: 0; }

The output is:

<div>, world</div>
<div>hello ,</div>

Is this what you want? I am assuming not.

By the way, just so you know, when you create your parts array parts = text.split(reg);

you receive firstly an array like ["", " world"] and secondly like: ["hello ", ""]

I don't think this is what you expect or at least it doesn't help achieve the output I think you want to?

Let's assume you actually want this as the output? - let's call it "A":

<div><b>hello</b> <i>world</i></div>

Or maybe you want this? (not very clear from your question) - let's call it "B":

<div><b>hello</b></div>
<div><i>world</i></div>

so let's try to achieve A:

const text = "hello world";
const parts = text.split(" ");

temp1 = parts.map(part => {
  return part.match(/hello/) ?
          `<b>${part}</b>` :          
          part.match(/world/) ?
          `<i>${part}</i>`:
          part
})
text1 = `<div>${temp1.join(' ')}</div>`;

console.log(text1)
.as-console-wrapper { max-height: 100% !important; top: 0; }

Output (A):

<div><b>hello</b> <i>world</i></div>

Now let's try B:

const text = "hello world";
const parts = text.split(" ");

temp1 = parts.map(part => {
  return part.match(/hello/) ?
          `<b>${part}</b>` :          
          part.match(/world/) ?
          `<i>${part}</i>`:
          part
})
text1 = temp1.map(part => {
  return `<div>${part}</div>`
})

console.log(text1.join('\n'))
.as-console-wrapper { max-height: 100% !important; top: 0; }

Output (B):

<div><b>hello</b></div>
<div><i>world</i></div>

Please edit your question to explain exactly what output you are looking for.

Update, after the question was edited now it's clear what the desired output is so I'll put that into react now:

It doesn't seem to work on the stack overflow snippet,

But it does work in codePen: https://codepen.io/Alexander9111/pen/VwLGzpJ

Output:

enter image description here

enter image description here

function Example() {
  const text = "hello world";
  const modText = text.replace(/ /g, ", ");
  const parts = modText.split(",");

  return (
    <>
      {parts.map(part => {
        return part.match(/hello/) ? (
          <b>{part}</b>
        ) : part.match(/world/) ? (
          <i>{part}</i>
        ) : (
          part
        );
      })}
    </>
  );
}

ReactDOM.render(<Example />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">

Upvotes: 2

Related Questions