Javascript/Jquery: replace string pattern with link-CodePudding

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..

CodePudding user response：

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>

CodePudding user response：

try it:

const str= '<td >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>`);

CodePudding user response：

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>