Split string while preserving HTML formatting

Question

I want to be able to split strings while preserving HTML tags inside of them.

I am working on making a small typewriter effect for my website, but I want to be able to preserve HTML formatting while doing the effect.

e.g. Getting the first 10 characters of Hello, <strong>World</strong>! would result in Hello, <strong>Wor</strong>

Is there an easy way to do this in JS? If not, what would be the best way that I do this (i.e. should I use regex or just vanilla JS)

You have to parse the text and preserve tags. It might help to read RegEx match open tags except XHTML self-contained tags. — RobG
– RobG, Commented Aug 16, 2021 at 20:25

kol · Accepted Answer · 2021-08-16 20:41:21Z

1

function innerSubstring(s, indexStart, indexEnd) {
  let result = [];
  let insideTag = false;
  let index = 0;
  for (let i = 0; i < s.length; ++i) {
    if (insideTag) {
      if (s[i] === ">") {
        insideTag = false;
      }
    } else {
      if (s[i] === "<") {
        insideTag = true;
      } else {
        if (index < indexStart || indexEnd <= index) {
          ++index;
          continue;
        }
        ++index;
      }
    }
    result.push(s[i]);
  }
  return result.join("");
}

const s = "Hello, <strong>World!</strong>";
console.log(s);
console.log(innerSubstring(s, 0, 10));
console.log(innerSubstring(s, 2, 4));
console.log(innerSubstring(s, 8, 10));
console.log(innerSubstring(s, 2, 8));
console.log(innerSubstring(s, 2, 1000));

edited Aug 16, 2021 at 20:41

answered Aug 16, 2021 at 20:36

kol

28.9k13 gold badges91 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Split string while preserving HTML formatting

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related