How can I immitate Notepad++ "Show All Characters" functionality in a web-based UI

Question

I'd like to display messages in my web-based UI for, without going into much detail as to why, remote trouble-shooting purposes over the phone. Some messages it is important to have both a carriage return and line feed, while others should just have one or the other.

Notepad++ has a Show All Characters function

that does this, and I'd like to implement something similar into my web UI.

I'd love for something that looks like

to be able to looks like

Problem is, I can't find any information on how to do this online. The best I can find is how to escape special characters or how to implement the tag, which isn't what I'm trying to do here.

Answer 1

One way is to make control characters visible. See my previous answer.

Test

public static void main(String[] args) {
    System.out.println(showControlChars("I need this\r\n" +
                                        "message to show\r\n" +
                                        "with the all \r\n" +
                                        "special characters\r\n" +
                                        "\r\n"));
}
private static String showControlChars(String input) {
    StringBuffer buf = new StringBuffer();
    Matcher m = Pattern.compile("[\u0000-\u001F\u007F]").matcher(input);
    while (m.find()) {
        char c = m.group().charAt(0);
        m.appendReplacement(buf, Character.toString(c == '\u007F' ? '\u2421' : (char) (c + 0x2400)));
        if (c == '\n') // Let's preserve newlines
            buf.append(System.lineSeparator());
    }
    return m.appendTail(buf).toString();
}

Output

I need this␍␊
message to show␍␊
with the all ␍␊
special characters␍␊
␍␊