JavaScript split on char but ignoring double escaped chars

Question

I'm trying to do something similar to this but cant get it working.

How to split a comma separated String while ignoring escaped commas?

I have tried to figure it out but cant seem to get it right.

I would like to split the string on : but not the escaped one \\:
(my escape char is a double slash)

given: dtet:du\\,eduh ei\\:di:e,j
expected outcome: ["dtet"] ["du\\,eduh ei\\:di][e,j"]

regex link: https://regex101.com/r/12j6er/1/

Are you sure that the input string contains two backslashes, or is it just the string literal that has escaped one backslash? — Bergi, Jul 16 '17 at 21:04

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

See the function below named splitOnNonEscapedDelimeter(), which accepts the string to split, and the delimeter to split on, which in this case is :. The usage is within the function onChange().

Note that you must escape the delimeter you pass to splitOnNonEscapedDelimeter(), so that it is not interpreted as a special character in the regular expression.

function nonEscapedDelimeter(delimeter) {
  return new RegExp(String.raw`[^${delimeter}]*?(?:\\\\${delimeter}[^${delimeter}]*?)*(?:${delimeter}|$)`, 'g')
}

function nonEscapedDelimeterAtEnd(delimeter) {
  return new RegExp(String.raw`([^\\].|.[^\\]|^.?)${delimeter}$`)
}

function splitOnNonEscapedDelimeter(string, delimeter) {
  const reMatch = nonEscapedDelimeter(delimeter)
  const reReplace = nonEscapedDelimeterAtEnd(delimeter)

  return string.match(reMatch).slice(0, -1).map(section => {
    return section.replace(reReplace, '$1')
  })
}

function onChange() {
  console.log(splitOnNonEscapedDelimeter(i.value, ':'))
}

i.addEventListener('change', onChange)

onChange()

<textarea id=i>dtet:du\\,eduh ei\\:di:e,j</textarea>

Requirements

This solution makes use of the ES2015 features String.raw() and template literals for convenience, though these are not required. See the relevant documentation above to understand how these work and use a polyfill such as this if your target platform does not include support for these features.

Explanation

new RegExp(String.raw`[^${delimeter}]*?(?:\\\\${delimeter}[^${delimeter}]*?)*(?:${delimeter}|$)`, 'g')

The function nonEscapedDelimeter() creates a regular expression that does almost what is required, except with a few quirks that need to be corrected with some post-processing.

string.match(reMatch)

The regular expression, when used in String#match(), splits the string into sections that either end with the non-escaped delimeter, or to the end of the string. This also has the side-effect of matching a 0-width section at the end of the string, thus we need to

.slice(0, -1)

to remove that match in post-processing.

new RegExp(String.raw`([^\\].|.[^\\]|^.?)${delimeter}$`)

...

.map(section => {
  return section.replace(reReplace, '')
})

Since each section now ends with the delimeter except for the last one (which ends at the end of the string), we need to .map() the array of matches and remove the non-escaped delimeter (thus why nonEscapedDelimeterAtEnd() is so complicated), if it is there.

Interesting approach :) small sidenote: It's `delimiter`, not `delimeter` (stems from limit, not meter, I guess) -- seems to be a common spelling error. — Jay, Jul 16 '17 at 20:50
@Jay my bad. thank you for pointing that out, I suppose I should fix that at some point. — Patrick Roberts, Jul 16 '17 at 23:17

score 2 · Answer 2 · answered Jul 16 '17 at 20:23

2

This is a little bit lengthy approach. but works for you. JavaScript regular expressions do not support lookbehinds. But you can do it by simply reverse your original string and split a string using lookahead. And then reverse array and all strings in it and you will get your result.

function reverse(s) {
  var o = '';
  for (var i = s.length - 1; i >= 0; i--)
    o += s[i];
  return o;
}


var str = "dtet:du\\,eduh ei\\:di:e,j";
var res = reverse(str);
var result  = res.split(/:(?!\\)/g);
result  = result.reverse();
for(var i = 0; i < result.length; i++){
 result[i] = reverse(result[i]);
}

console.log(result);

answered Jul 16 '17 at 20:23

Manoj Verma

141
1
10

you can use split("").reverse().join("") to reverse a string :D (see Bonus Solution in my answer) – Jay Jul 16 '17 at 21:35
Thank you, would this work if i replaced `:` with with whatever wanted the delimiter to be based on the double escape. – Seabizkit Jul 26 '17 at 20:10
why is it that when i run this i am only getting one slash and instead of 2, works as expected in SO... but in console does not. P.S. the Split i right but its dropping a escape char – Seabizkit Jul 26 '17 at 20:43
backslash(\) character is treated as an escape character in javascript, so javascript ignores it and prints next character as a control symbol. Use console.log(JSON.stringify(result)) to print the string with \\. – Manoj Verma Jul 26 '17 at 22:34

Jay · Answer 3 · 2017-07-17T00:04:06.790

I could come up with two solutions. One that is based on adjusting array contents and one that uses a regex.

Solution 1:

Approach: Split on :, then shovel elements into new array and glue those back together that should not have been split.

function splitcolon(input) {
    var inparts = input.split(":");
    var outparts = [];
    var splitwaslegit = true;
    inparts.forEach(function(part) {
        if (splitwaslegit) {
            outparts.push(part);
        } else { // the split was not justified, so reverse it by gluing this part to the previous one
            outparts[outparts.length-1] += ":" + part;
        }
        // the next split was legit if this part doesn't end on \\
        splitwaslegit = (part.substring(part.length-2) !== "\\\\");
    });
    return outparts;
}

Tested in chrome:

splitcolon("dtet:du\\\\,eduh ei\\\\:di:e,j")
(3) ["dtet", "du\\,eduh ei\\:di", "e,j"]

Note:
Could of course also use a for loop or underscore's each instead of forEach

Solution 2:

Approach: If there is any char or string of which you can be 100% sure that it won't be in the input, then you can use that char/string as a temporary delimiter inserted by a regex like this:

var tmpdelim = "\x00"; // must *never* ever occur in input string

var input = "dtet:du\\\\,eduh ei\\\\:di:e,j";
input.replace(/(^.?|[^\\].|.[^\\]):/g, "$1" + tmpdelim).split(tmpdelim);

Result:

(3) ["dtet", "du\\,eduh ei\\:di", "e,j"]

Explanation of regular expression /(^.?|[^\\].|.[^\\]):/g:

/ - start of regex
( - matching group 1 start
^.? - we're at input start or any single char away from it (the escape requires 2)
| - or
[^\\]. - any char that is not a \ followed by any other char
| - or
.[^\\] - any char followed by anything other than a \
) - matching group 1 stop
: - the matching group (which can't be \\) must be followed by a :
/ - end of regex
g - regex modifier global (match all occurances, not just the first)

which we replace with $1 + tmpdelim, so with whatever was in matching group 1, followed by our special delimiter (instead of :) which we can then use for splitting.

Bonus solution

Manjo Verma's answer as one-liner:

input.split("").reverse().join("").split(/:(?!\\\\)/).reverse().map(x => x.split("").reverse().join(""));

Result:

(3) ["dtet", "du\\,eduh ei\\:di", "e,j"]

@PatrickRoberts I was wondering that too, for a moment. But split() uses the provided delimiter parameter (in this case a regex) for splitting as often as possible, so the `g` is already implied :) — Jay, Jul 16 '17 at 23:33

kcpr · Answer 4 · 2023-01-20T01:03:43.480

It's probably not "super fancy" solution, but possibly more time-efficient one. Escaping an escape character is also supported and it's working in browsers not supporting 'lookbehinds'.

function splitByDelimiterIfItIsNotEscaped (text, delimiter, escapeCharacter) {
    const splittedText = []
    let numberOfDelimitersBeforeOtherCharacter = 0
    let nextSplittedTextPartIndex = 0
    for (let characterIndex = 0, character = text[0]; characterIndex < text.length; characterIndex++, character = text[characterIndex]) {
        if (character === escapeCharacter) {
            numberOfDelimitersBeforeOtherCharacter++
        } else if (character === delimiter && (!numberOfDelimitersBeforeOtherCharacter || !(numberOfDelimitersBeforeOtherCharacter % 2))) {
            splittedText.push(text.substring(nextSplittedTextPartIndex, characterIndex))
            nextSplittedTextPartIndex = characterIndex + 1
        } else {
            numberOfDelimitersBeforeOtherCharacter = 0
        }
    }
    if (nextSplittedTextPartIndex <= text.length) {
        splittedText.push(text.substring(nextSplittedTextPartIndex, text.length))
    }
    return splittedText
}

function onChange () {
    console.log(splitByDelimiterIfItIsNotEscaped(inputBox.value, ':', '\\'))
}

addEventListener('change', onChange)

onChange()

After making a change unfocus the input box (use tab for example).
<input id="inputBox" value="dtet:du\,eduh ei\:di:e,j"/>

JavaScript split on char but ignoring double escaped chars

4 Answers4

Requirements

Explanation