How to replace particular patterns of text with HTML tags on front-end using JavaScript?

user7Z96 0
Viewed 53

There is a field in the CMS that does not allow HTML, but now we have to do some complex CSS styling to change the layout.

My idea is to replace some particular patterns of text with HTML tags.

For example, to change:

<div class="wrap">
  <figcaption>###2022-10-01###Opening Ceremony</figcaption>
  ...
  <figcaption>###2022-10-02###Welcoming Speech</figcaption>
  ...
  <figcaption>###2022-10-03###Race Day</figcaption>
</div>

into:

<div class="wrap">
  <figcaption><span class="date">2022-10-01</span>Opening Ceremony</figcaption>
  ...
  <figcaption><span class="date">2022-10-02</span>Welcoming Speech</figcaption>
  ...
  <figcaption><span class="date">2022-10-03</span>Race Day</figcaption>
</div>

Note: ###2022-10-02###Welcoming Speech is what I can put into the field.
So it is not a must to be ###. It can be other text, symbols, or patterns.

Shall we use htmlContent.replace? And I have to target all matched patterns on the web page. I am not sure how to do it correctly.

Trying on CodePen: https://codepen.io/pen/qBYXxbm

javascript html
2 Answers

Use a regular expression replacement.

htmlContent = htmlContent.replace(/###(.*?)###/g, '<span class="date">$1</span>');

(.*?) is a capture group that captures everything between the pair of ###, and $1 in the replacement string copies that this captured.

let htmlContent = `<figcaption>###2022-10-01###Opening Ceremony</figcaption>
...
<figcaption>###2022-10-02###Welcoming Speech</figcaption>
...
<figcaption>###2022-10-03###Race Day</figcaption>`;

htmlContent = htmlContent.replace(/###(.*?)###/g, '<span class="date">$1</span>');
console.log(htmlContent);

Barmar0

Details are commented in example

// Collect all <figcaption> into a NodeList
document.querySelectorAll("figcaption")
  // For each <figcaption>...
  .forEach(cap => {
    // ...split it's text at "###" into an array
    const text = cap.textContent.split('###')
      // ...filter any empty parts of the array
      .filter(t => t);
    //console.log(text);
    /*
    Render the template literal within the <figcaption>
    interpolate the content of array text
    */
    cap.innerHTML = `<span class="date">${text[0]}</span> ${text[1]}`;
  });
section,
figure {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.date {
  color: red
}
<section>
  <figure>
    <img src="https://s.abcnews.com/images/International/olympics-fireworks4-gty-ml-220204_1643987789890_hpEmbed_3x2_992.jpg" width="240">
    <figcaption>###2022-10-01###Opening Ceremony</figcaption>
  </figure>
  <figure>
    <img src="https://gupshups.org/wp-content/uploads/2019/11/Welcome-speech-for-the-seminar.jpg" width="240">
    <figcaption>###2022-10-02###Welcoming Speech</figcaption>
  </figure>
  <figure>
    <img src="https://cdn.quotesgram.com/img/70/24/616754473-2c33e6276057e5c799641af64e446ccb.jpg" width="240">
    <figcaption>###2022-10-03###Race Day</figcaption>
  </figure>
</section>

zer00ne0
Related