使用正则表达式将字符串文本替换为HTML标签

Question

我有这个文本的字符串:

let text = "#Jim, Start editing to see some magic happen!";

我要怎么做?

text = "<span style="color:red">#Jim</span>, Start editing to see some magic happen!";

我的失败尝试如下:

export default function App() {
let text = "#Jim, Start editing to see some magic happen!";
// const regex = /#|[|]/gm;
// text = text.replace(regex, (innerText) => {
//   return <span style={{ color: "red" }}>{innerText}</span>;
// });
return (
<div className="App">
<div
dangerouslySetInnerHTML={{
__html: text
}}
/>
</div>
);
}

https://codesandbox.io/s/youthful格温- 55757 - z?file=/src/app.js: 24 - 419

Answer 1

我不确定这是否是您真正需要的。无论如何，我认为这是更接近一步。

我做了一个新的正则表达式来获得'#' +单词，并为文本更新替换它是必要的播放

text = text

:

import "./styles.css";
export default function App() {
let text = "#Jim, Start editing to see some magic happen!";
const regex = /#[a-zA-Z]+/gm;
text = text.replace(regex, (match) => {
return `<span style="color: red">${match}</span>`;
});
return (
<div className="App">
<div
dangerouslySetInnerHTML={{
__html: text
}}
/>
</div>
);
}

Answer 2

你的方法是有效的，它只是风格不呈现在innerHTML

运行此示例，您将看到标签显示为粗体(还更改了一点正则表达式)

let text = '#Jim, Start editing to see some magic happen!';
const regex = /(#+[a-zA-Z0-9(_)]{1,})/gm;
text = text.replace(regex, (match) => {
return `<strong>${match}</strong>`;
});

如果你想要应用样式，你必须将组件中的Encapsulation更改为None，如下所示:

@Component({
selector: 'app-my-hashtag-component',
styles: ['./app-my-hashtag-component.css'],
templateUrl: './app-my-hashtag-component.html',
encapsulation: ViewEncapsulation.None,
})