Замените https ссылки на <a>, используя трафарет - PullRequest
Новая
       23

Замените https ссылки на <a>, используя трафарет

0 голосов
/ 05 февраля 2019

У меня проблема с заменой ответа из API и форматированием его правильно 

answerFromAPI = "textword textword textword textword textword.\n\nFeel free to ask me questions from this site:\nhttps://google.com  \n"

Я хочу отформатировать и отобразить его следующим образом: 

textword textword textword textword textword.


Feel free to ask me questions from this site:

https://google.com     /*this should be clickable link*/

Для этого у меня естьсоздал две функции.1-й для текстовых ссылок 

 let textLink = answerFromAPI.replace(/(((https?\:\/\/)|(www\.))(\S+))/gi,
           function (x) {
             console.log(x)
            return '<a href="' + x + '" target="_blank">' + x + '</a>';
         })

2-й для новой строки 

let newLine = answerFromAPI.replace(/(\n?\\n)/ig, function(n) {
            console.log(n)
            return '<br />'
          })

и я пытаюсь вставить в массив после применения их к функциям, давайте возьмем тестовые ссылки, например 

array= []
array.push(textLink)

после этого я рендеринг массива в jsx 

render() {
let temp = []

this.array.map((a,index)=>{
temp.push(<p>{a}</p>)}
)}

и возвращаю следующим образом 

return <div>
{temp}
</div>

Как правильно отрисовать мое сообщение на внешнем интерфейсе.Я пробовал несколько способов, но я столкнулся с одной проблемой: ответ от функции передается в виде строки, а не тега HTML.

Как я могу это сделать?

1 Ответ

0 голосов
/ 08 февраля 2019

Вам необходимо установить свойство innerHTML для элемента, чтобы он отображал HTML, а не строку. 

return <div innerHTML={temp} />;

Подробнее см. https://stenciljs.com/docs/templating-jsx#complex-template-content.

...