javascript, parse an html string and recognize parts

Question

I have a string like this:

"this is a string with <em>html</em> values"

and I need to recognize the em part and the before and after part of the html tags.

can I use javascript to split the string into an array, as example:

["this is a string with", "html", "values"]

Does this answer your question? [Parse an HTML string with JS](https://stackoverflow.com/questions/10585029/parse-an-html-string-with-js) — Heretic Monkey, Jun 01 '20 at 14:36

ROOT · Accepted Answer · 2020-06-01T17:06:55.410

You can use DOMParser to parse the string into HTML, and once you create an instance and pass the string to it, you can get the generated document childNodes then iterate through them using .forEach(), note how I check the nodes we are iterating through for #text as a name for the node, since this check is for text nodes and not actual HTML tags:

let domparser = new DOMParser();
let doc = domparser.parseFromString('this is a string with <em>html</em> values', 'text/html');

doc.body.childNodes.forEach(function(node) {
  if (node.nodeName === "#text") {
    console.log(node.nodeValue);
  } else {
    console.log(node);
  }
});

score 1 · Answer 2 · edited Aug 09 '21 at 16:09

The other answer is useful if you want to navigate between html nodes, but if you are interested in manipulating strings instead, you can look into regular expressions. See for instance https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions for an introduction.

// Input string
let str = 'this is a string with <em>html</em> values';

// The reg exp matching what you asked. 
let reg_exp = /(.+)<em>(.+)<\/em>(.+)/;

// Verify that the input string matches the result
if(reg_exp.test(str)) {
    
  // Extract the value captured by the parenthesis
  let output = [RegExp.$1, RegExp.$2, RegExp.$3];
  
  // Contains ["this is a string with", "html", "values"]
  console.log(output);
}

javascript, parse an html string and recognize parts

2 Answers2