I am trying to remove tags from a string but keeping the order in tact using Regular expression. The string I have is this
<p><span style="color: blue;">General Power</span></p><p>This contains some info.</p><p><br></p><p>!</p><p>enable</p><p>bus at</p><p>terminal: <span style="color: red;">Name Terminal</span></p><p>enable bus name <span style="color: red;">Switch Bus</span></p><p>no ip domain-lookup</p><p><span style="color: rgb(0, 0, 0);">ip domain name </span><span style="color: red;">region</span><span style="color: rgb(0, 0, 0);">.google</span></p><p><br></p><p>!</p>
What I have tried so far is
const [string, setString] = useState(
`<p><span style="color: blue;">General Power</span></p><p>This contains some info.</p><p><br></p><p>!</p><p>enable</p><p>bus at</p><p>terminal: <span style="color: red;">Name Terminal</span></p><p>enable bus name <span style="color: red;">Switch Bus</span></p><p>no ip domain-lookup</p><p><span style="color: rgb(0, 0, 0);">ip domain name </span><span style="color: red;">region</span><span style="color: rgb(0, 0, 0);">.google</span></p><p><br></p><p>!</p>`
);
useEffect(() => {
const regex = /(<([^>]+)>)/gi;
const newString = string.replace(regex, " ");
setString(newString);
}, []);
What I get is this
General Power This contains some info. ! enable bus at terminal: Name Terminal enable bus name Switch Bus no ip domain-lookup ip domain name region .google !
The order I want is:
General Power
This contains some info.
!
enable
bus at
terminal: Name Terminal
enable bus name Switch Bus
no ip domain-lookup
ip domain name region.google
!
const [string, setString] = useState(
`<p><span style="color: blue;">General Power</span></p><p>This contains some info.</p><p><br></p><p>!</p><p>enable</p><p>bus at</p><p>terminal: <span style="color: red;">Name Terminal</span></p><p>enable bus name <span style="color: red;">Switch Bus</span></p><p>no ip domain-lookup</p><p><span style="color: rgb(0, 0, 0);">ip domain name </span><span style="color: red;">region</span><span style="color: rgb(0, 0, 0);">.google</span></p><p><br></p><p>!</p>`
);
useEffect(() => {
const regex = /(<([^>]+)>)/gi;
const newString = string.replace(regex, " ");
setString(newString);
}, []);
This is what I have tried so far
I am trying to remove tags from a string but keeping the order in tact using Regular expression. The string I have is this
<p><span style="color: blue;">General Power</span></p><p>This contains some info.</p><p><br></p><p>!</p><p>enable</p><p>bus at</p><p>terminal: <span style="color: red;">Name Terminal</span></p><p>enable bus name <span style="color: red;">Switch Bus</span></p><p>no ip domain-lookup</p><p><span style="color: rgb(0, 0, 0);">ip domain name </span><span style="color: red;">region</span><span style="color: rgb(0, 0, 0);">.google.</span></p><p><br></p><p>!</p>
What I have tried so far is
const [string, setString] = useState(
`<p><span style="color: blue;">General Power</span></p><p>This contains some info.</p><p><br></p><p>!</p><p>enable</p><p>bus at</p><p>terminal: <span style="color: red;">Name Terminal</span></p><p>enable bus name <span style="color: red;">Switch Bus</span></p><p>no ip domain-lookup</p><p><span style="color: rgb(0, 0, 0);">ip domain name </span><span style="color: red;">region</span><span style="color: rgb(0, 0, 0);">.google.</span></p><p><br></p><p>!</p>`
);
useEffect(() => {
const regex = /(<([^>]+)>)/gi;
const newString = string.replace(regex, " ");
setString(newString);
}, []);
What I get is this
General Power This contains some info. ! enable bus at terminal: Name Terminal enable bus name Switch Bus no ip domain-lookup ip domain name region .google. !
The order I want is:
General Power
This contains some info.
!
enable
bus at
terminal: Name Terminal
enable bus name Switch Bus
no ip domain-lookup
ip domain name region.google.
!
const [string, setString] = useState(
`<p><span style="color: blue;">General Power</span></p><p>This contains some info.</p><p><br></p><p>!</p><p>enable</p><p>bus at</p><p>terminal: <span style="color: red;">Name Terminal</span></p><p>enable bus name <span style="color: red;">Switch Bus</span></p><p>no ip domain-lookup</p><p><span style="color: rgb(0, 0, 0);">ip domain name </span><span style="color: red;">region</span><span style="color: rgb(0, 0, 0);">.google.</span></p><p><br></p><p>!</p>`
);
useEffect(() => {
const regex = /(<([^>]+)>)/gi;
const newString = string.replace(regex, " ");
setString(newString);
}, []);
This is what I have tried so far
Share Improve this question asked Dec 3, 2022 at 18:00 John DoeJohn Doe 531 gold badge1 silver badge5 bronze badges3 Answers
Reset to default 8Try this, this will erase all type of html tags, classes and css properties
const regex = /(<([^>]+)>)/gi;
const result = text.replace(regex, "");
DOMParser bined with a method to retrieve all text nodes would be more appropriate. And rather than an effect hook for this, consider passing a function to useState - that way, the state never gets set to the (undesirable) value with the HTML markup, but starts out as the replaced string without any re-renderings - or avoid state entirely now that it isn't being set anywhere.
const getTextContentOnly = (html) => {
const doc = new DOMParser().parseFromString(html, 'text/html');
const walker = document.createTreeWalker(
doc.body,
NodeFilter.SHOW_TEXT,
null,
false
);
const texts = [];
let node;
while(node = walker.nextNode()) {
texts.push(node.nodeValue);
}
return texts;
}
const App = () => {
const texts = React.useMemo(() => getTextContentOnly(
`<p><span style="color: blue;">General Power</span></p><p>This contains some info.</p><p><br></p><p>!</p><p>enable</p><p>bus at</p><p>terminal: <span style="color: red;">Name Terminal</span></p><p>enable bus name <span style="color: red;">Switch Bus</span></p><p>no ip domain-lookup</p><p><span style="color: rgb(0, 0, 0);">ip domain name </span><span style="color: red;">region</span><span style="color: rgb(0, 0, 0);">.google.</span></p><p><br></p><p>!</p>`
), []);
return texts.map((text, i) => <div key={i}>{text}</div>);
};
ReactDOM.createRoot(document.querySelector('.react')).render(<App />);<script crossorigin src="https://unpkg./react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg./react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>You can do like this.
export function Example() {
// ...
return (
<div>
<StoryOutput
output={html.replace(/(<([^>]+)>)/gi, '')}
/>
</div>
)
}