Can anyone suggest a simple* way to do the following?

"this is <mark>just an</mark> example <mark>snippet</mark>"

to

["this is", "<mark>just an</mark>",  "example", "<mark>snippet</mark>" ]

CodePudding user response：

Just split by regex, that will give you some empty elements.. you can filter empty elements afterwards.

let a = "this is <mark>just an</mark> example <mark>snippet</mark>";
let x = a.split(/( <mark>.*?().*?<\/mark>)/g); // ['one', '.two', '.three'];
console.log(x.filter( (el) =>el) );

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

function splitHTML (inputString) {
  const result = [];
  
  // 1. Replace a HTML tag with ###<mark> and </mark>###
  inputString = inputString.replaceAll('<mark', '###<mark');
  inputString = inputString.replaceAll('</mark>', '</mark>###');
  
  // 2. Split on the newly added sign
  inputString = inputString.split('###');
  
  // 3. Filter out empty lines and return the result
  return inputString.filter((a) => a);
}

console.log(splitHTML('this is <mark>just an</mark> example <mark>snippet</mark>')); // => ['this is ', '<mark>just an</mark>', ' example ', '<mark>snippet</mark>']

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Split by regex, but considering all HTML tags, not just <mark>.

function splitHTML (inputString) {
  return inputString
    .split(/(<[a-zA-Z]*>.*?().*?<\/[a-zA-Z]*>)/g)
    .filter((i) => i);
}

console.log(splitHTML('this is <mark>just an</mark> example <mark>snippet</mark>'));

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Try using replace all, it will work....

    <input type="text" id="text" style="width:500px; max-width: 500px;"/>
    <script>
        const value = "this is <mark>just an</mark> example <mark>snippet</mark>";
        var result = "[\""   value.replaceAll(" <mark>", "\", \"<mark>").replaceAll("</mark> ", "</mark>\" , \"")   "\"]";
        document.getElementById("text").value   = result;
    </script>