Question

我有一个article元素，其中文本的某些部分由span包裹。 E.g。

<article contenteditable="true">
    alice <span class="foo">bob</span> eve <span class="foo">bob</span>"
</article>

我想用其内部文本替换特定的span元素（例如第一个），因此最终结果将是：

<article contenteditable="true">
    alice bob eve <span class="foo">bob</span>"
</article>

请不要向replace all spans with a regex建议，因为我想保留第二个。我确实在变量中保存了所需的span元素，例如mySpan。请注意，它不一定是第一个跨度。例如。如果mySpan指向第二个span元素，则结果应为：

<article contenteditable="true">
    alice <span class="foo">bob</span> eve bob"
</article>

更新：随意提出基于jquery的解决方案，因为我无论如何都要将其用于其他功能。

Answer 1

您可以使用Node.replaceChild()

//Find the specific selector to get the span
var span = document.querySelector('span.foo');
var text = span.textContent;
span.parentNode.replaceChild(document.createTextNode(text), span);

<article contenteditable="true">
    alice <span class="foo">bob</span> eve <span class="foo">bob</span>"
</article>

Answer 2

您可以使用如下所示的功能：

function replaceSpan(index) {
  var parentEl = document.querySelector('article');
  var targetSpan = parentEl.querySelectorAll('span')[index];
  parentEl.replaceChild(document.createTextNode(targetSpan.innerText), targetSpan);
}

/* jQuery equivalent
 function replaceSpan(index) {
   var $targetSpan = $('article').find('span:eq(' + index + ')');
   $targetSpan.replaceWith($targetSpan.text());
 }*/

replaceSpan(0)

<!--script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script-->
<article contenteditable="true">
  alice <span class="foo">bob</span> eve <span class="foo">bob</span>"
</article>

Answer 3

这是一种可能的方式，但在使用时要小心。另外，请不要忘记查看browser support。

var span = document.querySelector("span");
span.outerHTML = span.innerHTML;

span { background: silver; }

<article contenteditable="true">
    alice <span class="foo">bob</span> eve <span class="foo">bob</span>"
</article>

PS：我认为仅使用dom节点的方法比这个方法要好得多。在这个答案中，html再次被解析，因此甚至连接到旧元素内的节点的侦听器也将被删除。此外，解析结果可能与原始结构不同。

Answer 4

请务必检查所有方法的浏览器支持。

~function () {
  var span = document.querySelector("span");
  var parent = span.parentElement;
  while (span.firstChild) parent.insertBefore(span.firstChild, span);
  parent.removeChild(span);
}();

span { background: silver; }

<article contenteditable="true">
    alice <span class="foo">b<a href="//google.ru">o</a>b</span> eve <span class="foo">bob</span>"
</article>

Answer 5

由于jQuery标记已添加到问题中，这是一个简单的jQuery解决方案：

$("span").eq(0).replaceWith(function () { return $(this).contents() })

span { background: silver; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<article contenteditable="true">
    alice <span class="foo">bob</span> eve <span class="foo">bob</span>"
</article>

从没有正则表达式的跨度中解开文本

5 个答案: