使用jQuery将锚标签转换为纯文本

Question

我在HTML转PDF过程中遇到一个问题，我的包含tel:协议的锚点标签在点击时会出现错误。事实证明这些hrefs被视为相对URL，而不像mailto:一样被认为是自己的东西。

我想，如果我能直接定位这些元素，就可以获取其内容，隐藏<a>标签并仅在新元素中显示内容。也许我考虑过度了？

这是我尝试的代码：https://jsfiddle.net/BIPC_Sydor/yL8suwno/1/

我想尝试针对特定div（菜单类）内每个<a>标签实例进行定位。然后将每个实例的内容复制到一个新的<p>标签（pdf类）。从那里我可以隐藏旧的<a>并美化新的<p>。不幸的是，它输出了比我预期更多的锚点内容实例。这可行吗？

来自Fiddle的我的代码：

HTML

<div class="menu">
  <a href="page.html">Page 1</a>
  <a href="page2.html">Page 2</a>
</div>

JS

$( '.menu a' ).each(function( i ) {
  var res = $('.menu a').text();
  $('.menu a').after('<p class="pdf">'+ res +'</p>');
});

- Jeff Sydor

---

你看过 jQuery.replace 吗？ - fubar

Answer 1

你可以使用 after(function) 并链式调用 hide() 方法来隐藏 <a> 标签。

$('.menu a').after(function() {
  return $('<p>', {class: 'pdf', text: $(this).text()})
}).hide()

p.pdf { color: red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <a href="page.html">Page 1</a>
  <a href="page2.html">Page 2</a>
</div>

- charlietfl

---

所以这在示例中可以工作，但当我重新启用了用于HTML-to-PDF的内容时，它就无法工作了。有没有一种使用纯PHP来实现这个的方法？ - Jeff Sydor

Answer 2

在您的each()方法中也使用value，并使用值引用来更新节点，否则它将更新所有节点。

$( '.menu a' ).each(function( index,value ) {
  var res = $(value).text(); // value is for current iteration
  $(value).after('<p class="pdf">'+ res +'</p>');
  // do something else...
});

参考链接：https://api.jquery.com/jquery.each/

- Rohit Gupta