how to make a text object have different html properties so that the #hashtag is blue and the rest is black?
The content of the text comes from a collection, then when loading the data, the hashtag must appear already blue, or what is the best way to create a hashtag for my site?
I hope you can help me
For every occurrence of # edit its html proprieties and then add it back to the rest of the text
My intention is that users who comment on my site can put their hashtag, send the comment and when the data is loaded the hashtag is ready, there must be a form so that in the code of the page it is changed to blue only the hashtag to load
Hi,
Use this code to change all #hashtags to blue:
$w.onReady(function () {
$w('#dataset1').onReady( () => {
let myValue = $w("#text1").text;
let arr = myValue.split(" ");
let html = "<p>";
for(let i=0; i < arr.length; i++){
if(arr[i][0] === "#"){
html += `<span style="color: blue">${arr[i]} </span>`
}
else{
html += (arr[i] + " ");
}
}
html += "</p>"
$w('#text1').html = html;
});
});
Hope it helps 
Or
You are amazing! that worked, although one more thing, I managed to change the font of the hashtag but I need all the text to be in “Helvetica”. How do I do it?
let value = itemData.post;
let arr = value.split(" ");
let html = “
”;
for ( let i = 0; i < arr.length; i++) {
if (arr[i][0] === “#”) {
html += <span style="color: blue;font-family:helvetica;font-size:16px;">${arr[i]} </span>
} else {
html += (arr[i] + " ");
}
}
html += “
@jessyerena Easiest way will be to define your header example H1 with properties and just wrap it with the two tags
Simply match
with your desire style. So add a p and then save your style to it, thats all you need.
@carlosgalvarez
Do you know how I could add a specific link for each hashtag? so that the click is redirected to all posts that contain it
@jessyerena You’ll replace it for something like this, if the user types # example it’ll redirect you to http://mywebstie.com/example
let site = 'http://mywebsite.com/'+arr[i].slice(1, arr[i].length)
html += '<span style="color: blue"><a href="'+site+'</a></span>'
@carlosgalvarez
This was my original code:
let value = itemData.post;
let arr = value.split(" ");
let html = "<p>"
for (let i = 0; i < arr.length; i++) {
if (arr[i][0] === "#") {
html += `<span style="color: #002B7D;font-family:helvetica;font-size:16px;">${arr[i]} </span>`
} else {
html += (arr[i] + " ");
}
}
html += "</p>"
$item('#post').html = html;
result:
This is the substitution you mentioned to add a link to the hashtag:
let value = itemData.post;
let arr = value.split(" ");
let html = "<p>"
for (let i = 0; i < arr.length; i++) {
let site = 'https://www.mysite.com.mx/' + arr[i].slice(1, arr[i].length)
if (arr[i][0] === "#") {
html += '<span style="color: blue"><a href="'+site+'</a></span>'
} else {
html += (arr[i] + " ");
}
}
html += "</p>"
$item('#post').html = html;
result:
due to how it appears try to modify it like this:
let value = itemData.post;
let arr = value.split(" ");
let html = "<p>"
for (let i = 0; i < arr.length; i++) {
if (arr[i][0] === "#") {
let site = 'https://www.mysite.com.mx/' + arr[i].slice(1, arr[i].length)
html += '<span style="color: blue">' + '<a href=' + site + '</a></span>'
} else {
html += (arr[i] + " ");
}
}
html += "</p>"
$item('#post').html = html;
result:
What am I doing wrong? why did the hashtag disappear?
I think I do not replace it correctly
Where you have the + sign you forgot your text so it should be
’ + yourText +‘<a href=’ + site + ‘’
I added another hashtag to verify if the link is added to both
This code is the previous
html += `<span style="color: blue">${arr[i]} </span>`;
Result
Here add the Text as you suggested
html += '<span style="color: blue">' + arr[i] + '<a href=' + site + '</a></span>'
Result
Here modify “” to try to solve it
html += '<span style="color: blue">' + arr[i] + '<a> href=' + site + '</a></span>'
Result
Another modification, here the “href=http://mywebsite.com/” disappeared but the hashtag does not contain a link
html += '<span style="color: blue">' + arr[i] + '<a href=' + site + '></a></span>'
Result
It is prabable that there is a problem with “href =” I can not get the text hashtag to contain a link
I’ve got it! apparently this is the correct way
html += '<span style="color: blue">' + arr[i] + '<a href=' + site + '></span>'
Result
Now the hashtag has the corresponding link, however a space has disappeared between example#words => example #words now I must recover that " " that has been lost
let value = itemData.post;
let arr = value.split(" ");
let html = "<p>"
for (let i = 0; i < arr.length; i++) {
let site = 'http://mywebsite.com/'+arr[i].slice(1, arr[i].length)
if (arr[i][0] === "#") {
html += '<span style="color: blue">' + arr[i] + '<a href=' + site + '></span>';
} else {
html += (arr[i] + " ");
}
}
html += "</p>"
$item('#post').html = html;
}
Ok this is the final, probably not the most appropriate way but it has worked
Thank you so much
html += '<a href=' + site + '>' + '<span style="color: blue">' + arr[i] + " " + '</span>';
Criamos um banco de dados com conteúdo gerado pelo usuário e exibimos em um repetidor em nossa pagina feed. Como eu posso aplicar este codigo para transformar as palavras digitatadas com “h” em hashtags?
Se puder me ajudar, gratidão.