使用 jQuery 将锚标记转换为纯文本 [英] Converting an anchor tag to plain text with jQuery

问题描述

我在输出 HTML 到 PDF 的过程中遇到问题，其中包含 tel: 协议的锚标记在单击时回退错误.事实证明，这些 hrefs 被视为相对 URL，这与将 mailto: 识别为它自己的东西不同.

我认为如果我可以直接定位这些元素，我可以获取它们的内容，完全隐藏 标签，只在新元素中显示内容.也许这是多虑了?

这是我去的地方:https://jsfiddle.net/BIPC_Sydor/yL8suwno/1/

我想尝试将 <a> 标记的每个实例定位到特定 div(菜单类)中.然后将每个实例的内容复制到一个新的

标签(pdf 类)中.从那里我可以隐藏旧的 并风格化新的

.不幸的是，它在我预期的更多情况下输出两个锚点的内容.这可行吗?

我的小提琴代码:

HTML

<a href="page.html">第 1 页</a><a href=page2.html">第2页</a>

JS

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

解决方案

你可以使用 after(function) 和 chain hide() 来隐藏 <a> 以及

$('.menu a').after(function() {返回 $('<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="菜单"><a href="page.html">第 1 页</a><a href="page2.html">第 2 页</a>

I am running into a problem with my output of an HTML-to-PDF process where my anchor tags that contain the tel: protocol are kicking back errors when clicked. It turns out that these hrefs are being seen as relative URLs unlike how mailto: is recognized as it's own thing.

I figure that if I can target these elements directly, I could take their content, hide the <a> tag entirely and only display the content in a new element. Maybe this is overthinking it?

Here's where I went: https://jsfiddle.net/BIPC_Sydor/yL8suwno/1/

I wanted to try and target each instance of an <a> tag within a specific div (class of menu). Then copy the content of each instance into a new <p> tag (class of pdf). From there I could hide the old <a> and stylize the new <p>. Unfortunately, it's outputting both anchors' content in more instances that I expected. Is this doable?

My code from the 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>');
});

解决方案

You can use after(function) and chain hide() to hide the <a> as well

$('.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>

这篇关于使用 jQuery 将锚标记转换为纯文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！