Detect an URL an make it clickable (data sent via textBox)

Ask the community
,
1

Hello,

I’ve created a comment box that users can fill to post a comment via a user input; their comments are then displayed publicly on a page.
I would like to know if it was possible to detect when a link is posted to make it clickable, since Wix Text Boxes make links plain text (no decoration, no clickability)

Thanks ! :slight_smile:

2

bump !

3

Hi Tristan,

there is no way to do it automatically at the moment. But you can add your custom code that formats text links as clickable links.

For example you could use Rich Text type for comment. When user clicks submit, you could match URLs with regex and replace them with HTML a tags to something like link.

4

Hi,

I’m not sure I understand it correctly.
There is no rich text input provided by wix unfortunately, so I can’t set up a rich text field in my collection. All I have is the “big” box that only takes simple text. My idea was to create some kind of if condition like :

if a piece of text in repeater 5 begins with http OR www then make it orange and clickable

5

Help ! That’s the very last thing I need before publishing my website after 4 months of development !

6

Yes, you would have to use simple text, but that’s the idea - replace the text with HTML. You can use Rich Text (HTML content) in database and as an output.

So, here’s a proof of concept:

$w('#text1').html = 
    $w('#input1').value
        .replace(/((http:|https:)[^\s]+[\w])/g, '<a href="$1" target="_blank">$1</a>')

So, what happens here is:

  1. I take the value from #input1
  2. I use my (imperfect) RegEx to find URLs (basically anything that starts with http: or https: up until space) and replace it with HTML for URL placing the URL in appropriate palces (the $1)
  3. Taking that resulting HTML and putting it to a text component. But instead of setting via value property I am using html so it sets the HTML formatting.

You could use Rich Text field in your collection and do a conversion before saving the value to the database. If you’ll bind Rich Text values to text components, Wix will know to use the HTML correctly (when binding it will not work with fields of Text, as it will just display the HTML in text).

To make it orange just apply a bit of styling via style attribute on a tag (ex. style=“color: orange”).

I hope this answers your question.

7

What is #text1 ? I assume #input1 is the textBox input (which in my case is #textBox1), but I can’t figure out what #text1 is.

The displayed comment is in #text95
The simple text in the collection is named #commentaire
The rich text is names #commentRich

8

I tried a tweaked version of your code in a bit of code I already have :

//refreshes comments + goes to top of comment box upon submitting a message
export function button43_click(event, $w) {
	
	//POST A COMMENT
	//post a comment and get the item's ID + title + URL
	
		$w("#repeater2").onItemReady(($w, itemData, index) => {
			$w('#dataset3').setFieldValue('item', $w('#text54').text);
		});
		let url = wixLocation.url;
		$w('#dataset3').setFieldValue('url', url);
		$w('#dataset3').setFieldValue('reference', $w('#input2').value);
		const dataWithFixedLinkStyles = event.data.replace(/\<a/g, `/(http:|https:)[^\s]+[\w])/g, '<a href="$1" style="color:#F78E05; target="_blank">$1</a>`);
 		$w('#dataset3').setFieldValue("commentRich", dataWithFixedLinkStyles);
		$w("#dataset3").save()
		.then(() => {
			$w("#dataset2").refresh();
 			wixData.query("commentaires")
	  			.contains("reference", $w('#input2').value)
	  			.find()
	  			.then( (results) => {
					let numberOfItems = results.totalCount;
					$w('#text96').text = numberOfItems + ' COMMENTAIRES';
				});
				console.log('Done refreshing Comments');
				$w('#anchor1').scrollTo();
		});	
}

the thing is, now upon clicking the button, it won’t submit the data anymore, nor execute any of the other commands.

9

I tried many things, but couldn’t find any solution !

That’s the last thing I need !

I think the best way is to keep the simple text field and just “read” the displayed comments and when the code reads ‘https’ or ‘www’ then it turns it into orange and clickable (and open the link in a new tab)

10

Hi, Tristan,

Do you see any errors in console after clicking the button?

11

for the code i posted above, I get this :

TypeError: Cannot read property ‘replace’ of undefined

But is the code correct ?

12

I posted a thread on stackoverflow, but it seems like wix coding language differs a little :

13

Your code does not work because here event does not have property “data”. Try to select this data with $w like in example Giedrius provided.

const dataWithFixedLinkStyles = event.data.replace(/\<a/g, `/(http:|https:)[^\s]+[\w])/g, '<a href="$1" style="color:#F78E05; target="_blank">$1</a>`); $w('#dataset3').setFieldValue("commentRich", dataWithFixedLinkStyles); $w("#dataset3").save() .then(() => { $w("#dataset2").refresh();  			wixData.query("commentaires") .contains("reference", $w('#input2').value) .find() .then( (results) => { let numberOfItems = results.totalCount; $w('#text96').text = numberOfItems + ' COMMENTAIRES'; }); 				console.log('Done refreshing Comments'); $w('#anchor1').scrollTo(); }); }
14

Actually I have decided to use CKeditor (rich text) instead, but thanks a lot for helping ! :slight_smile:

15

The blog article very surprised to me! Your writing is good related to personal care In this I learned a lot! Thank you!, please checkout more information on Lotus Notes Lotus Notes Developer