javascript - 立即用破折号(“-”)替换两个连字符(“-”)吗？

现在，我正在检查所有按键，并同时寻找两个连字符。然后我在光标位置插入一个破折号。但是连字符仍然存在。 （注意：insertEmdash函数是用于在我在线找到的光标位置处插入的函数，我不太了解它是如何工作的）

var prev_key = "";

$(window).keydown(function(event) {
  if(event.keyCode === 189) {
    prev_key === "-" ? insertEmdash() : prev_key = "-";
  }
});

function insertEmdash() {
  var sel, range, html;
  let time = "—";
  sel = window.getSelection();
  range = sel.getRangeAt(0);
  range.deleteContents();
  var textNode = document.createTextNode(time);
  range.insertNode(textNode);
  range.setStartAfter(textNode);
  sel.removeAllRanges();
  sel.addRange(range);

  prev_key = "";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

最佳答案

这将检查--，textarea或input中是否有任何[contenteditable]，并将其替换为—。
即使光标不在内容的末尾，它也可以工作。

document.getElementById('a').addEventListener('keyup', listener);
document.getElementById('b').addEventListener('keyup', listener); // does not work in IE or Edge, for some reason

function listener(e) {
  if (e.keyCode === 189 || e.keyCode === 109) {
    replaceHyphens(this);
  }
}

function replaceHyphens(el) {
  var sel = el.selectionStart || getCaretPosition(el),
    replaced = false;
  var key = (el.value ? 'value' : 'textContent');
  // replace any -- with —
  el[key] = el[key].replace(/-{2}/g, function(t) {replaced = true; return '—';});
  // fix the cursor position
  if (replaced) setCaretPosition(el, sel - 1);
}
// from http://stackoverflow.com/a/3976125 - gets the cursor position in a [contenteditable]
function getCaretPosition(editableDiv) {
  var caretPos = 0,
    sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      if (range.commonAncestorContainer.parentNode == editableDiv) {
        caretPos = range.endOffset;
      }
    }
  } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    if (range.parentElement() == editableDiv) {
      var tempEl = document.createElement("span");
      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
      var tempRange = range.duplicate();
      tempRange.moveToElementText(tempEl);
      tempRange.setEndPoint("EndToEnd", range);
      caretPos = tempRange.text.length;
    }
  }
  return caretPos;
}

function setCaretPosition(el, caret) {
  if (el.value) {
    el.setSelectionRange(caret, caret);
  } else {
    // from http://stackoverflow.com/a/6249440 - sets the cursor position in a [contenteditable]
    var tNode = el.firstChild;
    var range = document.createRange();
    range.setStart(tNode, caret);
    range.setEnd(tNode, caret);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  }
}

<textarea id="a" rows="6" cols="30"></textarea>
<p contenteditable style="height:100px;width:230px;border:1px solid black" id="b"></p>

事实证明，在contenteditable元素中获取和设置光标并不像在输入中那样简单。

关于javascript - 立即用破折号(“-”)替换两个连字符(“-”)吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42260593/