Question

我存储了用户选择的变量范围。

var sel, range, off, tags; 
sel = window.getSelection();
 if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            var off = sel.anchorOffset;

         }
         else if (document.selection && document.selection.createRange) {
            range = document.selection.createRange();
            var off = document.selection.anchorOffset;

        }
return range;

HTML

    <div ng-mouseup="mouseUpEvent(e)" ng-keyup="keyUpEvent()" contenteditable data-element="textBlock" id="markdown-body">

        Chicken ipsum dolor sit amet, consectetur adipiscing elivolutpat volutpat. Nunc imperdiet urna et orci mattis, 
pellentesque posuere enim pellentesque. Aenean id orci et nunc venenatis vestibulum et et ligula. Morbi mollis ornare purus
 non blandit.<b> Phasellus egestas</b>, ipsum <i>sit amet finibus </i>pellentesque, <span style="color: red;">tellus urna
 lobortis tellus, id tincidunt </span>Piza house byys nget lectus. Proin pulvinar enim non mi vestibulum interdum. 

            Sed nisl enim, sagittis non vestibulum eget, congue pellentesque ipsum. Nullam nec interdum elit

    </div>

我找到了我的anchorNode和我的focusNode。所以我选择了我的节点nodeName＆＃34; B＆＃34;。坚持大胆。

如果我执行element.nodeName，我的输出将是＆＃34; B＆＃34;。

如果我输出我的元素，我得到<b> Phasellus egestas</b> 我也有一个选定的范围，我选择了＃34; asellus eges＆＃34;

我想删除<b>个标签。并将标签添加到选择范围。如果我使用元素的innerHTML并替换它，那么我会选择范围。

我看到人们建议找到父节点而不是选择childNode并删除并执行以下操作：

element[index].parentNode.removeChild(element[index]);

但如果我的Parent有两个具有相同nodeName的子节点，那么这将导致问题。

我已经有了选择特定Node的元素，我如何保留innerConnet＆amp; HTML标记，但删除b标签？

Answer 1

在文本框中输入tagName，然后单击代码段中的 UNWRAP 按钮。所有详细信息都在代码段中注释。

<强>段

＆＃13;

function unWrap(wrap) {

  if (!wrap) {
    console.log('Enter a valid selector without quotes');
  }

  // Reference the node to unwrap
  var removeThis = document.querySelector(wrap);

  if (removeThis == "undefined" || removeThis == false) {
    console.log('Selector doesn\'t exist in DOM.');
  }

  // Reference the wrapper's parent
  var parent = removeThis.parentNode;

  // Move all of wrapper's descendants...
  while (removeThis.firstChild) {

    /* ...by taking the wrapper's first child...
    || ...and placing it in front of the wrapper.
    || ...Eventually, all of wrapper's children...
    || ...are it's siblings now.
    */
    parent.insertBefore(removeThis.firstChild, removeThis);

  }

  // Once the wrapper is empty, remove it
  parent.removeChild(removeThis);

}

＆＃13;

body {
  color: white;
}
header,
footer {
  background: cyan;
  color: black;
}
table {
  border: 3px solid gold;
  width: 300px;
}
td {
  border: 1px solid tomato;
}
section {
  border: 8px dashed blue;
}
main {
  background: #444;
}
b {
  background: yellow;
  color: #444;
}
input {
  float: right;
  width: 12ch;
}
.as-console {
  color: blue;
}

＆＃13;

<main>
  MAIN
  <section>
    SECTION
    <header>HEADER</header>
    <p>TEXT TEXT <b>TEXT</b> TEXT TEXT</p>
    <p>TEXT TEXT <b>TEXT</b> TEXT TEXT</p>
    <p>TEXT TEXT <b>TEXT</b> TEXT TEXT</p>
    <p>TEXT TEXT <b>TEXT</b> TEXT TEXT</p>
    <p>TEXT TEXT <b>TEXT</b> TEXT TEXT</p>
    <table>

      <form id='f1' name='f1'>
        <input type='button' value='UNWRAP' onclick='unWrap(document.forms[0].txt.value)'>
        <input name='txt'>
      </form>

      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <footer>FOOTER</footer>
  </section>
</main>

＆＃13;

Answer 2

要获取HTML标记之间的代码，请使用：

var inside = element.innerHTML;

如果您想要更新源代码，请尝试以下方法：

element.outerHTML = element.innerHTML;

Answer 3

将元素替换为其第一个子元素（在本例中为文本节点）

if (element.tagName == 'B') {
  element.parentNode.replaceChild(element.firstChild, element);
}

如果是多个节点，请在删除之前为每个孩子使用insertBefore。

var child = element.firstChild;
while (child) {
  element.parentElement.insertBefore(child, element);
  child = child.nextSibling;
}

element.parentElement.removeChild(element);

Javascript - 如何删除nodeName或HTML标记，但保留内部标记？

3 个答案: