Question

我有以下代码，其中一个textarea覆盖左半边，一个div覆盖右半边。左侧插入的内容将被复制到右侧，HTML标记（<...>）以棕色显示。

我遇到的问题是如何使它成为如果标记在引号或撇号内（将其转换为字符串），它不会被替换方法中的RegEx模式捕获（不转棕色）。

为了更好地解释它，请将以下文本放在代码段的textarea中：

<html>
  <head>
    <script>
      function getString() {
        return "This string's content contains a tag \"<>\" which isn't suppost to be captured by the RegEx pattern in the replace method";
      }
    </script>
  </head>
</html>

function HtmlEncode(s) {
  let el = document.createElement("div");
  el.innerText = el.textContent = s;
  s = el.innerHTML;
  return s;
}
function textarea_oninput() {
  let text = document.getElementsByTagName('textarea')[0].value;
  text = HtmlEncode(text);
  document.getElementsByTagName('div')[0].innerHTML = text.replace(/&lt;(.*?(?=(?:&gt;)))&gt;/g, "<span style=\"color: rgb(155, 112, 63)\">&lt;$1&gt;</span>");
}

body {
  margin: 0px;
}
textarea {
  background: rgb(20, 20, 20);
  border-color: red;
  color: lightGray;
  height: 100%;
  margin: 0px;
  outline: 0;
  position: fixed;
  resize: none;
  white-space: nowrap;
  width: calc(50% - 0px);
}
div {
  background: rgb(20, 20, 20);
  border: 1px solid green;
  color: lightGray;
  font-family: monospace;
  height: calc(100% - 4px);
  left: 50%;
  margin: 0px;
  outline: 0;
  overflow: auto;
  padding: 2px 0px 0px 2px;
  position: fixed;
  resize: none;
  white-space: pre;
  width: calc(50% - 4px);
}

<textarea oninput="textarea_oninput()" spellcheck="false"></textarea>
<div></div>

使RegEx模式与/"|'.+tag.+"|'/类似是不够的，因为在\"的字符串中有\'，'，"，{{1在"的字符串中，可能还有更多我想要考虑的内容。

Answer 1

您必须在HTML标记之前匹配文字字符串：

document.getElementsByTagName('div')[0].innerHTML = text.replace(/"[^"\\]*(?:\\.[^\\"]*)*"|'[^'\\]*(?:\\.[^\\']*)*'|&lt;((?:.(?!&lt;))*)&gt;/g, function(match, p1) {
    return p1 ? "<span style=\"color: rgb(155, 112, 63)\">&lt;" + p1 + "&gt;</span>" : match;
});

注意：很可能是灾难性的回溯。

JavaScript RegEx - 阻止在字符串

1 个答案: