I've hit a bit of a roadblock. I'm currently working with StockTwits data and their API requires linking 'cashtags' (similar to hashtags but using $ instead of #).
The input data I have is
This is my amazing message with a stock $symbol that I need to click on
and what I need back (in string format) is
This is my amazing message with a stock
that I need to click on<a href ='https://stocktwits.com/symbol' target='_blank> $symbol </a>
When rendered, only the $symbol should be clickable within the anchor tag.
If it helps, I have an array of symbols that will appear in every message without the $ sign.
Currently, I'm attempting this process in react but it's quite messy and I'm struggling to get it right.
//Message incoming is: 'This is my amazing message with a stock $symbol that I need to click on'
const message_body = unescape(this.props.data.body)
//find words to replace. Output is ['symbol1', 'symbol2', 'symbol3']
let find = [];
for(let symbl of this.props.data.symbols){
find.push(symbl.symbol)
}
//set values for replacement
let replace = [];
for(let symbl of find){
let url = `https://stocktwits.com/${symbl}`
let link = `<a href=${url} target="_blank">${symbl}</a>`
replace.push(link)
}
//using the replace-once library, replacing words in the message
let formed_message = replaceOnce(message_body, find, replace, 'gi')
......
//using react-html-parser to convert the <a href> tags into a clickable link
<Card.Text>{ReactHtmlParser(formed_message)}</Card.Text>
The expected output is
This is my amazing message with a stock $symbol that I need to click on
The $ is not included in the link, and only symbols preceded by a $ sign should be linked. For example,
$GOOG $SPY $AAPL off topic. Good job GOOGle!
In the above message, only GOOGL should be turned into a link as it starts with a $.
As mentioned, the code is complex and I'm almost there but open to any suggestions or improvements. Thank you!