使选定的文本成为变量并插入它

Question

我有一些 HTML 构造如下：

<div class="info_contact">
    <h2>Contact</h2>
    <p><strong>E-Mail</strong><a href="mailto:someone@address.com">someone@address.com</a></p>
    <p><strong>Tel.</strong>+44 2456-458</p>
    <p><strong>Fax </strong>0123 456 7879</p>
</div>

目的是通过 jQuery/Javascript 使电话号码可点击。到目前为止，我设法 select 并根据需要将文本包装在 a 标签中：

jQuery(document).ready(function(jQuery) {
    jQuery( '.info_contact p:contains("Tel.")' )
    .contents()
    .filter(function(){
        return this.nodeType == 3;
    })
    .wrap( '<a href="tel:"></a>' );
});

但不幸的是，缺少将 selected 文本作为 href 插入的选项，因此相应的行变为：

<p><strong>Tel.</strong><a href="tel:+44 2456-458">+44 2456-458</a></p>

是否可以通过创建变量（或替代变量）将 selected 文本插入 href 属性？

Answer 1

您可以在 filter 之后循环 (each) 结果，而在 wrap 内部循环：

jQuery(document).ready(function(jQuery) {
  jQuery('.info_contact p:contains("Tel.")')
    .contents()
    .filter(function() {
      return this.nodeType == 3;
    })
    .each(function(i, data) {
      $(data).wrap('<a href="tel:' + data.wholeText + '"></a>');
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info_contact">
  <h2>Contact</h2>
  <p><strong>E-Mail</strong><a href="mailto:someone@address.com">someone@address.com</a>
  </p>
  <p><strong>Tel.</strong>+44 2456-458</p>
  <p><strong>Fax </strong>0123 456 7879</p>
</div>

Answer 2

wrap 支持使用函数

jQuery(document).ready(function(jQuery) {
    jQuery( '.info_contact p:contains("Tel.")' )
    .contents()
    .filter(function(){
        return this.nodeType == 3;
    })
    .wrap( function(){ return '<a href="tel:' + $(this).text() + '"></a>' });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="info_contact">
    <h2>Contact</h2>
    <p><strong>E-Mail</strong><a href="mailto:someone@address.com">someone@address.com</a></p>
    <p><strong>Tel.</strong>+44 2456-458</p>
    <p><strong>Fax </strong>0123 456 7879</p>
</div>

使选定的文本成为变量并插入它

Make selected text a variable & insert it

html

javascript

jquery

href

textnode