Разделение содержимого node в JavaScript DOM

Ответ 1

Вот решение, которое будет работать для современных браузеров с помощью Range. Нечто подобное можно было бы сделать для IE < 9, используя TextRange, но я использую Linux, поэтому у меня нет простого доступа к этим браузерам. Я не был уверен, что вы хотите, чтобы функция выполняла, верните узлы или просто замените inline. Я просто сделал предположение и сделал замену inline.

function splitNode(node, offset, limit) {
  var parent = limit.parentNode;
  var parentOffset = getNodeIndex(parent, limit);

  var doc = node.ownerDocument;  
  var leftRange = doc.createRange();
  leftRange.setStart(parent, parentOffset);
  leftRange.setEnd(node, offset);
  var left = leftRange.extractContents();
  parent.insertBefore(left, limit);
}

function getNodeIndex(parent, node) {
  var index = parent.childNodes.length;
  while (index--) {
    if (node === parent.childNodes[index]) {
      break;
    }
  }
  return index;
}

Демо: jsbin

Он ожидает TextNode для node, хотя он будет работать с Element; смещение будет просто работать по-разному в зависимости от поведения Range.setStart

Ответ 2

См. метод Text.splitText.

Ответ 3

Не уверен, что это поможет вам, но это то, что я придумал...

Передайте функции элемент и строку имени тега node, которую вы хотите переместить вверх.

<strong>hi there, how <em>are <span id="span">you</span> doing</em> today?</strong>

<script type="text/javascript">


  function findParentNode(element,tagName){
    tagName = tagName.toUpperCase();
    var parentNode = element.parentNode;
    if (parentNode.tagName == tagName){
    //Erase data up to and including the node name we passed
    console.log('Removing node: '+parentNode.tagName+'  DATA: '+parentNode.firstChild.data);
    parentNode.firstChild.data = '';
    return parentNode;
}
    else{
    console.log('Removing node: '+parentNode.tagName+'  DATA: '+parentNode.firstChild.data);
    //Erase the first child data (the first text node and leave the other nodes intact)
    parentNode.firstChild.data = '';
    //Move up chain of parents to find the tag we want. Return the results so we can do things with it after
    return findParentNode(parentNode, tagName)
}
  }
var ourNode = document.getElementById("span");

alert(findParentNode(ourNode,'strong').innerHTML);


</script>