如何用格式替换字符串
如何用格式替换字符串
提问于 2021-06-25 19:30:43
在我的React应用程序中，我使用string.replace将字符串的部分替换为变量，并使用%VARIABLE%语法标识变量。对于纯文本，它工作得很好：
const text = 'This is %FIRST%, this is %SECOND%, and this is %THIRD%.'
.replace(/%\w+%/g, ((variable) => ({
'%THIRD%': 'a pear',
'%FIRST%': 'an apple',
'%SECOND%': 'a banana',
}[variable] || variable)));
console.log(text)
但是我试图想出一种方法来格式化变量文本(例如粗体格式)，所以文本的结果如下：
这是一个苹果，这是一个香蕉，这是一个梨。
我该怎么做？
回答 4
Stack Overflow用户
回答已采纳
发布于 2021-06-25 19:52:11
您可以将每个替换包在span中，并应用特定的CSS类和规则。使用dangerouslySetInnerHTML将html字符串呈现为div/元素。
const text = 'This is %FIRST%, this is %SECOND%, and this is %THIRD%.'
.replace(/%\w+%/g, ((variable) => {
const value = {
'%THIRD%': 'a pear',
'%FIRST%': 'an apple',
'%SECOND%': 'a banana',
}[variable] || variable;
return `<span class="bold">${value}</span>`;
}));
console.log(text);
const rootElement = document.getElementById("root");
ReactDOM.render(
<div dangerouslySetInnerHTML={{ __html: text }} />,
rootElement
);.bold {
font-weight: bold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root" />
Stack Overflow用户
发布于 2021-06-25 20:13:11
如果您不喜欢dangerouslySetInnerHTML，也可以使用一个名为html-react解析器的包。(我在下面的片段中使用了CDN版本)。基本上，它所做的就是将html代码转换成字符串格式，以响应元素。
解析器将HTML转换为一个或多个反应元素。
const App = () => {
const text =
"This is %FIRST%, this is %SECOND%, and this is %THIRD%.".replace(
/%\w+%/g,
(variable) =>
({
"%THIRD%": "<b>a pear</b>",
"%FIRST%": "<b>an apple</b>",
"%SECOND%": "<b>a banana</b>",
}[variable] || variable)
);
return <p> {window.HTMLReactParser(text)}</p>;
};
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script>
<div id="root"></div>
Stack Overflow用户
发布于 2021-06-25 20:17:50
您可以利用反应HTML分析器实现这一点：
import React, { useMemo } from 'react';
import ReactHtmlParser from 'react-html-parser';
const Component = () => {
const text = useMemo(
() =>
'This is %FIRST%, this is %SECOND%, and this is %THIRD%.'.replace(
/%\w+%/g,
variable => {
const replacement =
{
'%THIRD%': 'a pear',
'%FIRST%': 'an apple',
'%SECOND%': 'a banana',
}[variable] || variable;
return `<b>${replacement}</b>`;
},
),
[],
);
return <div>{ReactHtmlParser(text)}</div>;
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68136253
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号