javascript - 动态替换两个连字符 ("--") 为长破折号 ("—") ？

Question

现在我正在检查所有按键并查找两个同时出现的连字符。然后我在光标位置插入一个破折号。但连字符仍然存在。 (注意: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>

Answer 1

这将检查 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 元素中获取和设置光标并不像在输入中那么简单。