Javascript 无法创建范围（）

我试图在contentEditable元素中选择一个动态添加的timestamp-hit-enter

$“内容”。在“按键”上，函数E{ 如果e.which==13{ 控制台。记录“按下回车键”； e、 防止违约； 变量范围=window.getSelection.getRangeAt0； var元素=document.createElement'p'； element.setAttributeid，唯一标识符； var date=新的date.getTime； date=date.toString； 控制台。日志“日期：”+日期； element.textContent=日期； //element.innerHTML=； range.insertNodeelement； var range2=document.createRange； console.log“$content.text:”+$'content.text； var startOffset=$'content'.text.indexOfdate； console.log'startOffset:'+startOffset； range2.setStartdocument.getElementById'uniqueIdentifier'，startOffset； range2.setEnddocument.getElementById'uniqueIdentifier'，startOffset+date.length； //$‘内容p.new’。焦点； } };

---

测试有两种方法。传递DOM节点或传递节点的文本部分。 如果传递DOM节点，则应将开始偏移量和结束偏移量指定为0和1，以便在DOM节点上创建一个范围，如下所示

range.setStart(document.getElementById('uniqueIdentifier'), 0);
range.setEnd(document.getElementById('uniqueIdentifier'), 1);

var uid = document.getElementById('uniqueIdentifier');
range.setStart(uid.firstChild, 0); <-- firstChild refers to the text part of a DOM node
range.setEnd(uid.firstChild, uid.firstChild.length);

$('#content').on('keypress', function(e) {
  if (e.which === 13) {
    e.preventDefault();
    var date = new Date().getTime();
    date = date.toString();
    var range = window.getSelection().getRangeAt(0);
    var element = $('<p></p>')
                    .attr('class', 'uniqueIdentifier') 
                    .text(date);
    range.insertNode(element[0]); // the date node is added to the DIV at this stage
    var range2 = document.createRange();
    range2.setStart(element[0], 0); // <--- Give the entire date node starting at 0
    range2.setEnd(element[0], 1); // <--- Ending at 1 since there is only one node that you want a range of 
    var newNode = document.createElement("b"); // <--- I created a b element just so that the range is visible
    range2.surroundContents(newNode);
  }
});

如果要指定文本节点部分，则必须指定文本节点的长度，以便在DOM节点的文本部分上创建一个范围，如下所示

range.setStart(document.getElementById('uniqueIdentifier'), 0);
range.setEnd(document.getElementById('uniqueIdentifier'), 1);

var uid = document.getElementById('uniqueIdentifier');
range.setStart(uid.firstChild, 0); <-- firstChild refers to the text part of a DOM node
range.setEnd(uid.firstChild, uid.firstChild.length);

$('#content').on('keypress', function(e) {
  if (e.which === 13) {
    e.preventDefault();
    var date = new Date().getTime();
    date = date.toString();
    var range = window.getSelection().getRangeAt(0);
    var element = $('<p></p>')
                    .attr('class', 'uniqueIdentifier') 
                    .text(date);
    range.insertNode(element[0]); // the date node is added to the DIV at this stage
    var range2 = document.createRange();
    range2.setStart(element[0], 0); // <--- Give the entire date node starting at 0
    range2.setEnd(element[0], 1); // <--- Ending at 1 since there is only one node that you want a range of 
    var newNode = document.createElement("b"); // <--- I created a b element just so that the range is visible
    range2.surroundContents(newNode);
  }
});

你是在混合这两种方式。你可以这样解决

range.setStart(document.getElementById('uniqueIdentifier'), 0);
range.setEnd(document.getElementById('uniqueIdentifier'), 1);

var uid = document.getElementById('uniqueIdentifier');
range.setStart(uid.firstChild, 0); <-- firstChild refers to the text part of a DOM node
range.setEnd(uid.firstChild, uid.firstChild.length);

$('#content').on('keypress', function(e) {
  if (e.which === 13) {
    e.preventDefault();
    var date = new Date().getTime();
    date = date.toString();
    var range = window.getSelection().getRangeAt(0);
    var element = $('<p></p>')
                    .attr('class', 'uniqueIdentifier') 
                    .text(date);
    range.insertNode(element[0]); // the date node is added to the DIV at this stage
    var range2 = document.createRange();
    range2.setStart(element[0], 0); // <--- Give the entire date node starting at 0
    range2.setEnd(element[0], 1); // <--- Ending at 1 since there is only one node that you want a range of 
    var newNode = document.createElement("b"); // <--- I created a b element just so that the range is visible
    range2.surroundContents(newNode);
  }
});

希望这有帮助

$“内容”。在“按键”上，函数E{ 如果e.which==13{ e、 防止违约； var date=新的date.getTime； date=date.toString； 变量范围=window.getSelection.getRangeAt0； 变量元素=$ .attr'class'，'uniqueIdentifier' .textdate； range.insertNodeelement[0]； var range2=document.createRange； 范围2.设置起始元素[0]，0； 范围2.setEndelement[0]，1； var newNode=document.createElementb；

---

newNode.style.color=getRandomColor；//回答得很好！谢谢，.firstChild为我做的。从对我的引用中不清楚我们必须调用span元素上的.firstChild来定义其中的文本。