Utilize JavaScript to split an HTML div section using a delimiter

Question

Utilize JavaScript to split an HTML div section using a delimiter

On my current webpage, I have a gallery of images accompanied by captions.

<img>image1</img>
<div class="caption">IMAGE 1 TITLE: Subtitle</div>
<img>image2</img>
<div class="caption">IMAGE 2 TITLE: Subtitle</div>

I am interested in rearranging the Image Title and Subtitle within each caption so that I can style them individually. Each pair is currently divided by a colon :. Following this modification, the code should display as follows:

<img src="image1">
<div class="caption">
    <span class="title">IMAGE 1 TITLE</span>
    <span class="subtitle">Subtitle</span>
</div>
<img src="image2">
<div class="caption">
    <span class="title">IMAGE 2 TITLE</span>
    <span class="subtitle">Subtitle</span>
</div>

Although I cannot directly edit the HTML code, I do have the ability to inject JS code and insert custom CSS (as it is a squarespace website).

I am seeking a script that can effectively separate the text before and after the colon in each caption and then enclose them within respective classes.

javascript squarespace

Answer 1

Answer №1

Take the text, separate it into parts, and update the HTML to show your preferred title/subtitle formatting.

document.querySelectorAll('.caption').forEach((caption) => {
  const [title, subtitle] = caption.textContent.trim().split(/\s*:\s*/);
  caption.innerHTML = `
    <span class="title">${title}</span>
    <span class="subtitle">${subtitle}</span>
  `;
});

.caption { color: blue; }

.title { font-weight: bold; }
.subtitle { font-style: italic; }

.title:after { content: ':'; } /* optional */

<img src="http://placekitten.com/100/40" alt="image1" />
<div class="caption">IMAGE 1 TITLE: Subtitle</div>
<img src="http://placekitten.com/80/60" alt="image2" />
<div class="caption">IMAGE 2 TITLE: Subtitle</div>

Answer 2

Take the text, separate it into parts, and update the HTML to show your preferred title/subtitle formatting.

document.querySelectorAll('.caption').forEach((caption) => {
  const [title, subtitle] = caption.textContent.trim().split(/\s*:\s*/);
  caption.innerHTML = `
    <span class="title">${title}</span>
    <span class="subtitle">${subtitle}</span>
  `;
});

.caption { color: blue; }

.title { font-weight: bold; }
.subtitle { font-style: italic; }

.title:after { content: ':'; } /* optional */

<img src="http://placekitten.com/100/40" alt="image1" />
<div class="caption">IMAGE 1 TITLE: Subtitle</div>
<img src="http://placekitten.com/80/60" alt="image2" />
<div class="caption">IMAGE 2 TITLE: Subtitle</div>

Answer 3

Answer №2

This code snippet locates all the captions present on the webpage by using

document.querySelectorAll('.caption')

. It then proceeds to iterate through each caption, where it divides the text content of the caption into a title and subtitle by utilizing a colon as the separator. Afterwards, it constructs a fresh HTML string containing the title and subtitle encapsulated within appropriate classes, subsequently substituting the original caption HTML with this new HTML via caption.innerHTML.

// Gather all the captions
var captions = document.querySelectorAll('.caption');

// Iterate through each caption
captions.forEach(function(caption) {
  // Obtain the text content of the caption
  var captionText = caption.textContent;

  // Split the text into title and subtitle using the colon separator
  var titleSubtitleArray = captionText.split(':');
  var title = titleSubtitleArray[0];
  var subtitle = titleSubtitleArray[1].trim();

  // Replace the initial caption HTML with the updated HTML
  caption.innerHTML = '<span class="title">' + title + '</span><span class="subtitle">' + subtitle + '</span>';
});

Answer 4

This code snippet locates all the captions present on the webpage by using

document.querySelectorAll('.caption')

. It then proceeds to iterate through each caption, where it divides the text content of the caption into a title and subtitle by utilizing a colon as the separator. Afterwards, it constructs a fresh HTML string containing the title and subtitle encapsulated within appropriate classes, subsequently substituting the original caption HTML with this new HTML via caption.innerHTML.

// Gather all the captions
var captions = document.querySelectorAll('.caption');

// Iterate through each caption
captions.forEach(function(caption) {
  // Obtain the text content of the caption
  var captionText = caption.textContent;

  // Split the text into title and subtitle using the colon separator
  var titleSubtitleArray = captionText.split(':');
  var title = titleSubtitleArray[0];
  var subtitle = titleSubtitleArray[1].trim();

  // Replace the initial caption HTML with the updated HTML
  caption.innerHTML = '<span class="title">' + title + '</span><span class="subtitle">' + subtitle + '</span>';
});

Utilize JavaScript to split an HTML div section using a delimiter

Answer №1

Answer №2

Similar questions

Messages and responses from an array within a discord.js bot

Try opening a fresh page instead of displaying a pop-up that says "your message has been sent"

Fetch a single random profile image from a Facebook user's list of friends using Javascript

transferring a string parameter from PHP to a JavaScript function

The cursor seems to be playing a game of hopscotch every time I

Convert JSON object to a string representation

Utilizing the state as a condition within the useEffect to update the component

Unusual escape_javascript quirk witnessed in Ruby on Rails

Background image fixed with scrolling effect

Insert a Facebook like button within a designated div

How can I display color without using Winston's color formatter in text?

Can you determine the measurements of the combined image's height and width?

How can Typescript be leveraged to enforce a generic constraint on an interface?

Tips on incorporating a past random selection into an RPG lifepath generator's current random selection process

The jQuery selector is unable to locate the IMG element using its unique ID

Angular retrieving a document collection from Firebase based on a specific field

What is the significance of the error message '[WDS] Disconnected!' in the context of using webpack and Vue.js?

Javascript troubleshooting: Confusion with Radiobuttons and Checkboxes 'checked' status

I am facing difficulty importing emotion js style using dynamic variables

Encountering a Jquery TypeError while trying to update the content on