如何从DIV中的选定文本中删除某些标签？

Question

我正在尝试从以下文字中删除某些标签：

<div id="removetags">Remove Tags</div>
<div class="thetext">
    <p>text text <b>text text</b> text text text</p>
    <p>text text text text text <i>text text</i></p>
    <p>text <u>text text</u> text text text text</p>
    <p>text text <em>text text</em> text text text</p>
</div>

当用户选择部分文字，然后点击删除标记按钮时，我希望它从所选文本区域中删除以下标记：

$("div#removetags").click(function () {

    $("b,i,u,em").replaceWith(function() { 
        return this.innerHTML; 
    });

});

示例：

我想只从*所选文本中删除标签：

Answer 1

我有点不清楚你想要完成什么，但如果你想从元素中删除html标签，并将它们放入元素中，你可以使用类似下面的代码：

function applyFn() {
  $('#content-div').children().each( function(){
    let txt = $(this).text();
    console.log(txt);
    $('#empty-div').append( txt );
  });
}

<button onclick="applyFn()" >Click</button>
<div id="content-div">
<p>text <h3>span text </h3></p>
</div>

<div id="empty-div"></div>

请参阅get text from html attrs上的Ryan（@jrw2252）的笔CodePen。

Answer 2

我能想到的最简单的解决方案是使用.getSelection()的{​​{1}}并针对目标文本中的所有候选对象进行检查 - 找到后，将.containsNode()替换为简单的node。

textNode

document.querySelector('#removetags').addEventListener('click', function(e) {
  let sel = document.getSelection();
  let candidates = document.querySelector('.thetext').querySelectorAll('b,i,u,em');
  candidates.forEach(function(candidate) {
    // If you wish to only remove nodes that are selected entirely, not just partially,
    // do .containsNode(candidate, false)
    if(sel.containsNode(candidate, true)) {
      candidate.replaceWith(document.createTextNode(candidate.innerHTML));
    }
  });
});

Answer 3

目的

基本上这就是我所解释的目标：

1. 主要目标是创建文本编辑器。虽然从未提及，通过单击按钮选择文本然后解开，单位化和取消排行（这是一个真正的单词吗？）清楚地表明您正在制作文本编辑器。

2. 选择文字并删除选定的内联HTML标记。

解决方案

如果您能够删除 并添加 标记，那么不仅可以通过选择删除内嵌标记。 execCommand API是为开发文本编辑器而创建的，使用起来非常简单。

     document.execCommand(aCommandName, false, null);

第一个参数是唯一值得改变的参数，请参阅Commands了解其能力。第二个参数不起作用，因此总是错误的。最后一个参数用于可以传递参数的命令。

参考

• execCommand()
  • Commands: "italic", "bold", "underline"
• HTMLFormControlsCollection
  • HTMLElementForms
  • HTMLFormElement.elements
• 的 contenteditable Attribute
  • setAttribute()
  • removeAttribute()

演示

可以让编辑器进入和退出编辑模式

＆＃13;
＆＃13;
// Collect all form controls into a HTMLCollection
var x = document.forms.app.elements;

// Reference the switch
var btn = x.chx;

// Register switch to the click event
btn.onclick = editMode;

// Simple function to toggle composition mode (edit mode)
function editMode(e) {
  if (e.target.checked) {
    x.editor.setAttribute('contenteditable', true);
  } else {
    x.editor.removeAttribute('contenteditable');
  }
}
＆＃13;
#editor {
  font: 400 16px/1.5 Consolas;
  padding: 10px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
}

.btn {
  display: inline-block;
  font: inherit;
  font-size: 24px;
  margin: 0 5px;
  width: 32px;
  height: 32px;
  text-align: center;
  cursor: pointer
}

#chx {
  display: none
}

.switch {
  width: 9ch;
}

.switch::before {
  content: '\a0\270e';
  color: rgba(111, 111, 111, 0.33);
}

.switch::after {
  content: ' EDIT';
  color: rgba(111, 111, 111, 0.66);
}

#chx:checked+.switch::before {
  content: '\a0\270e';
  color: rgba(88, 111, 222, 0.66);
}

#chx:checked+.switch::after {
  content: ' EDIT';
  color: rgba(22, 111, 222, 1);
}
＆＃13;
<form id='app'>
  <fieldset id="editor">
    <p>Lorem <u>ipsum dolor sit amet</u>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <strong>laboris nisi ut aliquip</strong> ex ea commodo consequat.
      Duis aute <i>irure dolor in reprehenderit</i> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, <em>sunt in culpa qui officia deserunt mollit anim</em> id est laborum.</p>
  </fieldset>
  <fieldset id='ui'>
    <button type="button" class="btn" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"></button>
    <button type="button" class="btn" onclick="document.execCommand('bold',false,null);" title="Bold Highlighted Text"></button>
    <button type="button" class="btn" onclick="document.execCommand('underline',false,null);" title="Underline Highlighted Text"><u></u></button>

    <input id='chx' type='checkbox' class='mode'>
    <label for='chx' class='btn switch'></label>
  </fieldset>
</form>
＆＃13;
＆＃13;
＆＃13;