Adding hyperlinks using JavaScript

Ask the community
,
1

Hi there,

Background :
I have a database field that will include a small paragraph of information. Within that paragraph I’d like to give a specific word or phrase a hyperlink.

Proposed Steps:

  1. Create a secondary database that includes all keywords/phrases in one field, and the associated URL in a second field.
  2. Using JavaScript, read the secondary database into an array
  3. Read a target text element into a string
  4. Iterate through the array and replace any instances of target keyword/phrase with a new string that adds the associated hyperlink to the word
  5. Update text element to include the new string with new format
  6. Loop to repeat this process for each text element
    *Please feel free to suggest any improvements / alternate methods

Road Blocks:
What’s the best way to do steps 2 and 3?

Concerns:
Can steps 3-5 be condensed?
Whatever solution I end up implementing should not noticeably affect page load times.

2

This is a bit complicated to solve here with a small sample. I suggest you study the API page hard at https://www.wix.com/code/reference/wix-data.html or buy Code Block Standards at my site wixshow.com. I will then write it for you. You will need three blocks for this issue.

3

understood, just thought there might be some suggestions to get started and whether my approach makes sense from a more experienced perspective. For example, it’s not clear to me if I should be in data or dataset, and if there is anything else I should consider. I have no problem troubleshooting. I usually learn based off full complete examples, or by troubleshooting in a direction I know works. Anyway, I’ll dive into it. Just thought I’d try to get some starting hints/tips.

4

Updating for other users:

I referenced the thread here and experimented with the following code in the editor here .

The following code reads the text element’s html coding, and then replaces ‘UGC’ with the html coding that both underlines it and applies a hyperlink to Google (note: it must have ‘http://’ in the link address).

$w.onReady(function () {
const originalHtml = $w(‘#text3’).html;
console.log(originalHtml);
const indexToInsertRel = originalHtml.indexOf(‘UGC’);
const newHTML = originalHtml.substring(0, indexToInsertRel) + <span style="text-decoration:underline;"><a href="http://www.google.com"> UGC </a></span> + originalHtml.substring(indexToInsertRel + 3); //3 is the size of ‘UGC’
console.log(newHTML);
$w(‘#text3’).html = newHTML;
});

Now I just need to figure out how to read in information from a database. I’m sure there’s more in the help forums on this, so I’ll continue digging and update when I make further progress.

5

Hi !

I’ve build a comment section on one of my dynamic pages.
Users have the ability to post a comment via a “big” input.

I would like to have URL, if some are posted, to be converted into a clickable link.

Any help ?