Text fragment creating using JavaScript

Question

I have a string like below -

var text="this is <b>a sample</b> long text. <i>Sample <b>tex</b>t <u>containing</u> some</i> bold underlined and it<i>alics wo</i>rds."

I want a JavaScript array like this

var textArr = [
  "this is ",
  "<b>a sample</b>",
  " long text. ",
  " ",
  "<i>Sample</i>",
  " ",
  "<i><b>tex</b></i>",
  "<i>t</i>",
  " ",
  "<i><u>containing</u></i>",
  " ",
  "<i>some</i>",
  " bold underlined and it",
  "<i>alics wo</i>",
  "rds" 
];

I need this because I need each fragment so that I can create that formatted canvas text object and place them on canvas. Can anyone please help me on this?

The second answer here seems pretty relevant: http://stackoverflow.com/questions/4247838/best-way-to-parse-html-in-javascript Also, please use modern HTML tags, `` and `` instead of `` and ``. — cactus1, Feb 13 '14 at 15:32

score 1 · Accepted Answer · answered Feb 13 '14 at 15:57

You can use this piece of code:

var text="this is <b>a sample</b> long text. <i>Sample <b>tex</b>t <u>containing</u> some</i> bold underlined and it<i>alics wo</i>rds."

var t = document.createElement("div")
t.innerHTML = text;

var textArr = t.childNodes;

Text fragment creating using JavaScript

1 Answers1