score:-1
use string#replace. a basic regex to find urls and then use a callback to wrap the link in an <a>
const test = {
paragraphs: [
'text of paragraph a text http://google.com',
'text of paragraph b text text',
'text of paragraph http://www.yahoo.com b text text',
'text http://google.com of paragraph http://www.yahoo.com b text text',
]
};
const res = test.paragraphs.map(p=>{
return `<p>${p.replace(/http(s)?\:\/\/(www.)?[a-za-z]+\.[a-z]+/g, (link)=>`<a href="${link}">${link}</a>`)}</p>`;
});
document.body.innerhtml = res.join("");
score:0
this is an example of how to convert your string to html in an reactjs application
class app extends react.component {
constructor() {
super();
this.state = {
description: '<a href={to} target="_blank" {...rest}>{children}</a>'
}
}
render() {
return (
<div dangerouslysetinnerhtml={{ __html: this.state.description }} />
);
}
}
reactdom.render(<app />, document.getelementbyid('root'));
score:0
react don't transform your string automatically to jsx element, it's renderer as is.
so react allow your to inject your html code inside a html component with dangerouslysetinnerhtml props. at your own risk :)
see the docs here
render() {
return (
<div dangerouslysetinnerhtml={{ __html: '<p>this is dangerous</p>' }} />
);
}
Source: stackoverflow.com
Related Query
- Placing html tag inside string
- Adding html tag inside javascript string
- How can I replace/update specific HTML tag inside string
- Next.js - How to add a <link> tag inside the <head> with literal onload attribute string value?
- Inserting html inside string variable used in React component
- How to concat string and add html tag to it?
- How to replace string with html tag
- Next.js render app inside html markup coming as string
- How to remove HTML tag (not a specific tag ) with content from a string in javascript
- React Js- Can't see prop value inside html tag as key
- Render HTML entities inside a string in React
- replace string text with html tag using regex
- Split a string with HTML <br> tag into multiline string
- Fetching data from API and using it in JSX is giving string output to the html tag
- Print an HTML tag from a string in an array using React
- How to append a string and html tag in ternary operator condition?
- How to split the html string and get different tag with values
- ReactJs - Returning a string and tag html in a one object
- Concatenate a string and HTML Inside JSX Expression
- How to display all object's values inside HTML tag using forEach instead of manually iterating over all values
- Render HTML with <script> tag inside a component in REACT
- Define propType for a html tag as well as a string in Props validation
- Replace text inside html tags with in string in javascript?
- How to render FluentUI controls in a HTML page similar to rendering React Components in a script tag inside a Div
- How to give html tags inside string interpolation in reactjs?
- How to highlight string inside <code/> tag in react? dangerouslySetInnerHTML
- Render HTML string as real HTML in a React component
- ReactJS convert HTML string to JSX
- Add a class to the HTML <body> tag with React?
- How to query by text string which contains html tags using React Testing Library?
More Query from same tag
- option in select - method call
- Why does this React component return the string '0'
- How to define props in a enzyme-jest test
- Is it possible in Webpack to run my custom Loader whenever I import a fixed string and not a file?
- How can i hide a column in MUI?
- localStorage is saving my data but after refresh is reseting and empty it
- Customer ListItem of Selectable List doesn't work in material-ui
- In MERN how do I manage JWT cookies client-side?
- react says Error: Invalid hook call when I try to use material makestyles
- Is there a synchronous alternative of setState() in Reactjs
- How do I get the value from Form.Control in React Bootstrap?
- How to get a foreground colour on a pivot object
- Cannot correctly setup React-Router-Dom
- Promise.all in useEffect hook in React
- Set JSX attribute based on another JSX attribute react
- react this.props undefined or empty object
- React useEffect and clearInterval
- Jest spyOn for redux saga 'call' gives error
- React/TypeScript: extending a component with additional properties
- How to have button in the form which check for required fields on submit but does not refresh the page?
- How to split an Array into Odd Array and Even Array
- where do we get the props in render method in React.js
- Is there a way to check if the react component is unmounted?
- Can't get array of object from server
- React.js: Access Overall App State from a Standalone Component
- How to handle if any json files are failed to load in react-i18next
- Navigate in react using react-router-dom 6
- React Dynamic Component Naming
- Render select option based on a API call in react
- Changing state is causing props to change