How to find '>' and wrap into a tag without nesting?

Question

I am trying to find > sign in editable div with REGEX, replace it wrapping in span. The script(REGEX) works, but it has a few bugs.

If I type > sign 2 times dividing them by space like > >, it creates the following.

<span>
 <span>&gt;</span>
 &gt;
</span>

Instead I need this without nesting:

<span>&gt;</span>
<span>&gt;</span>

Also If I type > 2 times without space like >>, REGEX should take each > sign and wrap it into a separate span, like this:

<span>&gt;</span>
<span>&gt;</span>

Here is my code:

<div class="editable" contenteditable="true"></div>


.editable{
  height: 20px;
  border: 1px solid grey;
  cursor: text;
  white-space: pre-wrap;
}

span{
  white-space: pre-wrap;
}



var createRange = function (node, chars, range) {
  if (!range) {
    range = document.createRange()
    range.selectNode(node);
    range.setStart(node, 0);
  }

  if (chars.count === 0) {
    range.setEnd(node, chars.count);
  } else if (node && chars.count >0) {
    if (node.nodeType === Node.TEXT_NODE) {
      if (node.textContent.length < chars.count) {
        chars.count -= node.textContent.length;
      } else {
        range.setEnd(node, chars.count);
        chars.count = 0;
      }
    } else {
      for (var lp = 0; lp < node.childNodes.length; lp++) {
        range = createRange(node.childNodes[lp], chars, range);

        if (chars.count === 0) {
          break;
        }
      }
    }
  }

  return range;
};

var setCurrentCursorPosition = function (chars) {
  if (chars >= 0) {
    var selection = window.getSelection();

    range = createRange(document.querySelector('.editable'), { count: chars });

    if (range) {
      range.collapse(false);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  }
};

$('.editable').on('keydown', function() {
  if( new RegExp(/(?!<span>)&gt;(?!<\/span)/, 'g').test($(this).html()) ) {
    $(this).html(
      $(this).html().replace(/(?!<span>)&gt;(?!<\/span)/g, '<span>&gt;</span>')
    );

    setCurrentCursorPosition( $(this).text().length );
  }
});

Codepen demo

You can ignore createRange, setCurrentCursorPosition functions. They just move the cursor when typing > into the div.

you may want to read this first - https://stackoverflow.com/a/1732454/5053002 — Jaromanda X, Sep 11 '20 at 10:13
I saw the main answer which says don't use REGEX for parsing html, but others say if you work with small amount of data, it's ok. So this script is small one, it has a small check/REGEX. If there is > not inside , put it in . And that's all. — david, Sep 11 '20 at 10:22

score -1 · Answer 1 · answered Sep 11 '20 at 10:06

-1

Use html entities

<span>&gt;</span>

Documentation: https://www.w3schools.com/html/html_entities.asp

answered Sep 11 '20 at 10:06

Wimanicesir

4,606
2
11
30

1

If you look at the script, you'll see that script is written with entities. – david Sep 11 '20 at 10:10

How to find '>' and wrap into a tag without nesting?

1 Answers1