Javascript/Jquery: replace string pattern with link

Question

I have a table on a page, where there are text entries, and have one or more "hashtags", which I want to identify via JavaScript/JQuery and replace them with a link.

Currently I am using the following regex selector for hashtags: /#([a-zA-Z0-9]+)/g

I have been experimenting with replaceWith and replace methods of JQuery, but I couldn't achieve the desired result yet.

Example entries on the page:

<td class="entry">Had meeting with client #Project1</td>

This is my desired output (after manipulating via JavaScript/JQuery):

`<td class="entry">Had meeting with client <a href="search.php?`query=#Project1">#Project1</a></td>

Does someone help out with a function/for this? As my code is not close to working I am I choosing not to post the code..

Oleg Barabanov · Accepted Answer · 2021-10-19 06:36:41Z

1

Maybe this solution will help ?

document.querySelectorAll("table td.entry").forEach((el) => {
  el.innerHTML = el.innerHTML.replace(/#([a-zA-Z0-9]+)/g, '<a href="search.php?`query=#$1">#$1</a>')
})

<table>
  <tbody>
    <td class="entry">Had meeting with client #Project1</td>
    <td class="entry">Had meeting with client #Project2</td>
    <td class="entry">Had meeting with client #Project3</td>
    <td class="entry">Had meeting with client #Project4</td>
    <td class="entry">Had meeting with client #Project5</td>
  </tbody>
</table>

answered Oct 19, 2021 at 6:36

Oleg Barabanov

2,7622 gold badges12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

natenjo Over a year ago

thank you, I missed that I couldn't just select the class when using a table. Your answer brought me on the right track!

Manas Khandelwal · Accepted Answer · 2021-10-19 06:31:05Z

1

You can do something like this using JavaScript:

const entries = document.querySelectorAll(".entry");

entries.forEach((entry) => {
  entry.innerText.match(/#([a-zA-Z0-9]+)/g).forEach((hash) => {
    entry.innerHTML = entry.innerHTML.replace(
      hash,
      `<a href="search.php?query=${hash}">${hash}</a>`
    );
  });
});

<p class="entry">Had meeting with client #Project1</p>
<p class="entry">Had meeting with client #Project2 & #Project3</p>

answered Oct 19, 2021 at 6:31

Manas Khandelwal

3,9442 gold badges15 silver badges26 bronze badges

1 Comment

natenjo Over a year ago

thank you! I used your javascript and the correct selector for tables from Oleg Barabanov

foad abdollahi · Accepted Answer · 2021-10-19 06:31:35Z

0

try it:

const str= '<td class="entry">Had meeting with client #Project1</td>';

const match = str.match(/#([a-zA-Z0-9]+)/g);

var result = str.replace(match[0],`<a href="search.php?query=${match[0]}">${match[0]}</a>`);

answered Oct 19, 2021 at 6:31

foad abdollahi

2,04618 silver badges38 bronze badges

Collectives™ on Stack Overflow

Javascript/Jquery: replace string pattern with link

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related