Question 45445 in Html Question posted in
Some basic documentation can be found here.

How to convert text into a clickable button link – Html

I pulled data from a table from the Google API and I can show all the information from it. Now, I want to take specific columns that come in the form of text but are actually linked and turn those links into a clickable button.

I can style these elements through CSS, I made an example of nth-child, however, when I try to apply a function, nothing happens.

My code is here:

function convertYoutube() {
  const elements = document.querySelectorAll(".text-line:nth-child(8n)");
  const exp1 = /(b(https?|ftp|file)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;
  const exp2 = /(^|[^/])(www.[S]+(b|$))/gim;

  elements.forEach(element => {
    let youtube = element.textContent;
    youtube = youtube.replace(exp1, "<a href='$1'>$1</a>");
    youtube = youtube.replace(exp2, '$1<a target="_blank" href="http://2">$2</a>');
    element.innerHTML = youtube;
  });
}

convertYoutube();
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

.text-line:nth-child(8n) {
  color: red;
}

a.btn_link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 10px;
  padding: 20px;
  background: red;
  color: white;
  text-decoration: none;
  font-size: 16px;
}
<table>
  <tbody class="content_ecj" id="table-body-1">
    <tr class="line_table">
      <td class="text-line">Title 01</td>
      <td class="text-line">Title 02</td>
      <td class="text-line">Title 03</td>
      <td class="text-line">Title 04</td>
      <td class="text-line">Title 05</td>
      <td class="text-line">Tilte 06</td>
      <td class="text-line">Title 07</td>
      <td class="text-line">Title 08</td>
    </tr>
    <tr class="line_table">
      <td class="text-line">Lorem Ipsum</td>
      <td class="text-line">Em andamento</td>
      <td class="text-line">-</td>
      <td class="text-line">-</td>
      <td class="text-line">-</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
    </tr>
    <tr class="line_table">
      <td class="text-line">Lorem Ipsum</td>
      <td class="text-line">Em andamento</td>
      <td class="text-line">20</td>
      <td class="text-line">encerradas</td>
      <td class="text-line">realizada</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM/</td>
    </tr>
    <tr class="line_table">
      <td class="text-line">Lorem Ipsum</td>
      <td class="text-line">Em andamento</td>
      <td class="text-line">a definir </td>
      <td class="text-line"></td>
      <td class="text-line"></td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM/</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM/</td>
    </tr>
    <tr class="line_table">
      <td class="text-line">Lorem Ipsum</td>
      <td class="text-line">Em andamento</td>
      <td class="text-line">11</td>
      <td class="text-line">encerradas</td>
      <td class="text-line">realizada</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM/</td>
    </tr>
    <tr class="line_table">
      <td class="text-line">Lorem Ipsum</td>
      <td class="text-line">Em andamento</td>
      <td class="text-line"></td>
      <td class="text-line"></td>
      <td class="text-line"></td>
      <td class="text-line"><a class="btn_link" href="https://www.youtube.com/watch?v=jDpVRarF9UM">Veja Mais</a></td>
      <td class="text-line"><a class="btn_link" href="https://www.youtube.com/watch?v=jDpVRarF9UM">Veja Mais</a></td>
      <td class="text-line"><a class="btn_link" href="https://www.youtube.com/watch?v=jDpVRarF9UM">Veja Mais</a></td>
    </tr>
  </tbody>
</table>

I tried styling and formatting data coming from an API. For this, I applied a regex to separate and convert this information by creating a button that must be clickable and lead to the link inserted in each column.

Tags:

2

Answers


  1. 0

    assuming you want to run after building the table (and not during)

    Perhaps something like this:

    function linkCreator(el){
      var a = document.createElement('a');
      var linkText = document.createTextNode(el.innerText); // this text will be shown to the user. perhaps replace with the video's title
      a.appendChild(linkText);      
      a.classList.add("btn_link")
      a.href = el.innerText; // actual link
return a;
}

[...document.querySelectorAll("td.text-line:nth-child(8n)")].slice(1,).forEach(x=> x.replaceChildren(linkCreator(x))) //select relevant `td`s, ignore the first one (Title 8).

    This is what it looks like:

    function linkCreator(el) {
  var a = document.createElement('a');
  var linkText = document.createTextNode(el.innerText);
  a.appendChild(linkText);
  a.href = el.innerText;
  a.classList.add("btn_link")
  return a;
}



[...document.querySelectorAll("td.text-line:nth-child(8n)")].slice(1, ).forEach(x => x.replaceChildren(linkCreator(x)))
    table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

.text-line:nth-child(8n) {
  color: red;
}

a.btn_link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 10px;
  padding: 20px;
  background: red;
  color: white;
  text-decoration: none;
  font-size: 16px;
}
    <table>
  <tbody class="content_ecj" id="table-body-1">
    <tr class="line_table">
      <td class="text-line">Title 01</td>
      <td class="text-line">Title 02</td>
      <td class="text-line">Title 03</td>
      <td class="text-line">Title 04</td>
      <td class="text-line">Title 05</td>
      <td class="text-line">Tilte 06</td>
      <td class="text-line">Title 07</td>
      <td class="text-line">Title 08</td>
    </tr>
    <tr class="line_table">
      <td class="text-line">Lorem Ipsum</td>
      <td class="text-line">Em andamento</td>
      <td class="text-line">-</td>
      <td class="text-line">-</td>
      <td class="text-line">-</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
    </tr>
    <tr class="line_table">
      <td class="text-line">Lorem Ipsum</td>
      <td class="text-line">Em andamento</td>
      <td class="text-line">20</td>
      <td class="text-line">encerradas</td>
      <td class="text-line">realizada</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM/</td>
    </tr>
    <tr class="line_table">
      <td class="text-line">Lorem Ipsum</td>
      <td class="text-line">Em andamento</td>
      <td class="text-line">a definir </td>
      <td class="text-line"></td>
      <td class="text-line"></td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM/</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM/</td>
    </tr>
    <tr class="line_table">
      <td class="text-line">Lorem Ipsum</td>
      <td class="text-line">Em andamento</td>
      <td class="text-line">11</td>
      <td class="text-line">encerradas</td>
      <td class="text-line">realizada</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM</td>
      <td class="text-line">https://www.youtube.com/watch?v=jDpVRarF9UM/</td>
    </tr>        
  </tbody>
</table>
    Login or Signup to reply.
  2. 0

    This JavaScript code selects all elements with the class text-line that are the 8th child of their parent and applies the convertYoutube function to them.

    The function uses two regular expressions to match the text content of each selected element against a URL pattern. The exp1 expression matches URLs that start with http://, https://, ftp://, or file://. The exp2 expression matches URLs that start with http://www..

    The function replaces the matching text with an anchor tag that has a corresponding href attribute. The exp1 match result has the link target set to the matched URL, while the exp2 match result has the link target set to http:// plus the matched URL. The result of each match is then set as the innerHTML of the selected element, effectively converting the plain text into a clickable link.

    Please note that the code provided only replaces plain text with clickable links. If the text is already within an HTML element, such as a div or span, the code might not work as expected.

    The function replaces the matching text with an anchor tag that has a corresponding href attribute. The exp1 match result has the link target set to the matched URL, while the exp2 match result has the link target set to http:// plus the matched URL.

    The function then sets the result of each match as the innerHTML of the selected element, effectively converting the plain text into a clickable link.

    It’s possible that nothing is happening when you try to apply the function because the elements with the class text-line may not exist yet in the DOM at the time the function is called. You might need to wrap the function call in a window.onload event or use a more modern method such as addEventListener to make sure the elements are available when the function is called.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search