Question

正如标题所示，请考虑以下html代码段：

<html>
<body>
    <div>foo <span>text </span>bar</div>
</body>
</html>

我想通过删除span标签来对其进行转换，但是将它们包含的文本保留在同一位置，例如

<html>
<body>
    <div>foo text bar</div> 
</body>
</html>

我想用JavaScript做到这一点。因为这个任务很罕见（我想）（我实际上是在尝试构建用于标记NLP数据的GUI），所以我真的找不到浏览SO或Google的解决方案...而且我对JavaScript非常陌生，所以我没有真的不知道从哪里开始。

其他问题：如果知道如何解决第一个问题，也许可以快速提及如何在所有文档范围内执行相同的转换，例如以下文档：

<html>
<body>
    <div>foo <span>text </span>bar</div>
    <div>foo1 <span>text1 </span>bar1</div>
</body>
</html>

成为

<html>
<body>
    <div>foo text bar</div>
    <div>foo1 text1 bar1</div>
</body>
</html>

Thx

Answer 1

您可以将outerHTML的{{1}}更改为其<span>

innerHTML

var elms = document.querySelectorAll('div *');

elms.forEach(e => e.outerHTML = ` ${e.innerHTML} `)

//just to test the effect.
document.querySelectorAll('div').forEach(x => console.log(x.outerHTML))

Answer 2

使用replace：

let div = document.getElementById("myDiv");
div.innerHTML = div.innerHTML.replace("<span>", " ").replace("</span>", " ");

span {
  color: red;
}

<div id="myDiv">foo<span>text</span>bar</div>

Answer 3

您可以这样做

 $(document).ready(function(){
     $("div").each(function(index,item){
        $(item).html($(item).html().replace(/<\/?span[^>]*>/g,""));
     })
    })

$(document).ready(function(){
 $("div").each(function(index,item){
    $(item).html($(item).html().replace(/<\/?span[^>]*>/g,""));
 })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>foo <span>text</span> bar</div>
<div>foo1 <span>text1</span> bar1</div>

Answer 4

最简单的方法是将innerHtml更改为innerText（如果要删除所有内部标签）：

var divs = document.querySelectorAll('div');

for (i = 0; i < divs.length; i++) {
  divs[i].innerHTML = divs[i].innerText;
}

span {color:red;}

<div>foo <span>text </span>bar</div>
<div>foo1 <span>text1 </span>bar1</div>

Javascript：将<div> foo <span> text </span> bar </div>中的文本替换为<div> foo文本栏</div>

4 个答案: