Question

我需要解析我的文档。我的意思是我想将“ div”替换为“ p”

是这样的代码：

<section class="X">
<p>Some title</p>
<div data-newname="p"></div>
</section>

成为：

<section class="X">
<p>Some title</p>
<p></p> <- here is replacement 
</section>

因此，关键是，我需要按数据属性查找元素，并将开始（<div>）和结束（</div>）替换为我想要的任何内容。

但是我不知道该怎么办。我有很多具有data属性的divs元素，我需要替换为{{Start :: test}} {{End :: test}}-测试来自数据属性或其他。

感谢您的帮助。

Answer 1

使用jQuery，您可以使用https://api.jquery.com/replaceWith/并返回一个全新的jQuery元素对象

$('[data-newname]').replaceWith(function() {
  const tagName = $(this).data('newname')
  return $(`<${tagName}/>`, {text: 'demo'});
});

p {padding: 10px; outline: 1px solid red;}

<section class="X">
  <p>Some title</p>
  <div data-newname="p"></div>
</section>


<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在{}内，您可以传递任何喜欢的可用方法（请参见上面的示例，使用jQuery的text方法）

保留内容

如果您想保留内容，可以类似地做：

$('[data-newname]').replaceWith(function() {
  const tagName = $(this).data('newname')
  return $(`<${tagName}/>`, {html: $(this).html()});
});

p {padding: 10px; outline: 1px solid red;}

<section class="X">
  <p>Some title</p>
  <div data-newname="p">Lorem <b>ipsum</b> <i>dolor</i></div>
  <div data-newname="marquee">This still works wohaa</div>
</section>


<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

P.S：
不要为此感到困惑

$(`<${tagName}/>\`,

它与$('<'+ tagName +'/>',相同，只是使用Template Literal并使用占位符${}

将变量插入字符串中

https://api.jquery.com/replaceWith/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

使用jQuery替换元素标签

1 个答案:

保留内容