Как отключить ссылки в React при отображении контента с использованием dangerouslySetInnerHTML?

#javascript #reactjs

Вопрос:

Я создаю веб-сайт с помощью React, и пользователи могут вводить или копировать текст, например, из Википедии во входные данные.

Основная проблема заключалась в том, что скопированный текст отображается в формате html, поэтому я исправил эту проблему, используя dangerouslySetInnerHTML и защищая его DOMPurify следующим образом

 <Typography variant="body"
      dangerouslySetInnerHTML={{
         __html: DOMPurify.sanitize(item.label)
      }}
/>

Проблема в том, что мне не нужны ссылки и перенаправление из этого набранного текста позже при его отображении.

Как я могу это исправить, пожалуйста?

Ответ №1:

Если я предположу, что ваша item.label ценность-это что-то вроде :

 <div>
  Hello world
  <a href="wikipedia.com">Here is the explanation</a>
</div>

Единственный способ, который я мог придумать, — это использовать функцию замены.

Что-то вроде того :

 let str = "<div>Hello world<a href='wikipedia.com'>Here is the explanation</a></div>";
const result = str.replace(/(href=["'])([A-Za-z-\/:.]*)(["'])/ig, "");
console.log(result);

// You could also just replace the website with '#' in order to keep the link effect but to stay in the same page :
const result2 = str.replace(/(href=["'])([A-Za-z-\/:.]*)(["'])/ig, "$1#$3");
console.log(result2);

// Or even delete the link itself :
const temp = str.replace(/(<a[ ]*href=["'])([A-Za-z-\/:.]*)(["']>)/ig, " ");
const result3 = temp.replace(/</a>/ig, "");
console.log(result3);