Javascript 如何找到'&燃气轮机'；并包装成一个<；span>；没有嵌套的标签？

我正在尝试用

REGEX

查找

登录可编辑的

div

，将其替换为span中的包装。脚本（

REGEX

）工作正常，但有一些bug

如果我键入

>

符号2次，将它们除以空格，如

>

，它将创建以下内容

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

这是我的密码：

<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 );
  }
});

.可编辑{
高度：20px；
边框：1px纯灰；
光标：文本；
空白：预包装；
}
跨度{
空白：预包装；
}
var createRange=函数（节点、字符、范围）{
如果（！范围）{
range=document.createRange（）
范围。选择节点（node）；
range.setStart（节点，0）；
}
if（chars.count==0）{
range.setEnd（节点、字符数）；
}else if（节点和字符数>0）{
if（node.nodeType===node.TEXT\u节点）{
if（node.textContent.length=0）{
var selection=window.getSelection（）；
range=createRange（document.querySelector（'.editable'），{count:chars}）；
如果（范围）{
范围。塌陷（假）；
selection.removeAllRanges（）；
选择。添加范围（范围）；
}
}
};
$（'.editable'）。在（'keydown'，function（）上{
如果（新的RegExp（/（？！）（？！

进入

div

使用html实体

---

如果你看这个脚本，你会发现这个脚本是用实体编写的。你想在HTML上使用正则表达式吗？@JaromandaX是的，我知道你可能想先读一读这个-我看到的主要答案是不使用正则表达式来解析HTML，但其他人说，如果你使用少量数据，就可以了。所以这个脚本很小，它有一个小的检查/REGEX。如果里面没有，就把它放进去。就这样。

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

<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 );
  }
});