从 html <a> 标签中抓取由 class 识别的文本并自动将其输入到另一个文本区域

Question

我有一个由 WP 插件生成的 html 标签，其中包含一个随机的 link。我需要获取生成的 link 并将其写入文本区域（来自联系表），但需要它是自动的。

生成的代码包含 link（无法更改）：

<p class="ozpital-wpwetransfer-success__url"><a 
href="we.tl/123">we.tl/123</a></p>

文本区域中的代码自动写入 link:

<p><textarea class="wpcf7-form-control"></textarea></p>

我已经设法创建了一个带有按钮的变通方法，但它并不好，我需要自动化没有按钮的代码，我们运行它会自动编写的代码 link在文本区域。我也在尝试粘贴事件，但不必这样，我只是没有其他想法！

此处演示：https://jsfiddle.net/xf_analog/cgfwup90

我认为该演示不言自明，我们将不胜感激所有帮助。谢谢

Answer 1

如果该元素是动态生成的，您可以尝试这样做：

window.onload = ()=>{
   let link;
   let linkValue = '';
   let textArea = document.querySelector('textarea.wpcf7-form-control');
  
  // generate the paragraph that has the link after 5 seconds
  setTimeout(()=>{
    // the containing paragraph
    let paragraph = document.createElement('p');
    // the anchor element that will be containing the link we want
    let anchor = document.createElement('a');
    let textNode = document.createTextNode('I am the target');
    anchor.appendChild(textNode);
    anchor.setAttribute('href', 'we.tl/123');
    paragraph.classList.add("ozpital-wpwetransfer-success__url");
    paragraph.appendChild(anchor)
    document.body.appendChild(paragraph);
  }, 5000);
  
  // check if the anchor element exists then grab the value of its
  // href attribute
  setInterval(()=>{
    // grab the anchor element inside the containing paragraph
    link = document.querySelector('p.ozpital-wpwetransfer-success__url a');
    // get the value of the element above
    if(link){
      linkValue = link.getAttribute('href');
    }
    // update the textarea's value if and only if the link is not in its own value
    if(linkValue !== '' && textArea.value.indexOf(linkValue) == -1){
      textArea.value = link.getAttribute('href')
    }
  }, 1000)
};

<html>
  <body>
    <p><textarea class="wpcf7-form-control"></textarea></p>
  </body>
</html>

此外，这里有一个 working example。 :)

Answer 2

试试这个简单的，

HTML

<a href="google.com" class="aa">ff</a>
<textarea class="tt"></textarea>

JQuery

$(document).ready(function() { let link = $(".aa").attr("href"); $(".tt").val(link); });

从 html <a> 标签中抓取由 class 识别的文本并自动将其输入到另一个文本区域

Grab text from html <a> tag identified by class and input it into another textarea automaticaly

javascript

wordpress

jquery

copy

paste