操作字符串并将其作为 html 返回答案

【问题标题】：Manipulate a string and return it as html操作字符串并将其作为 html 返回
【发布时间】：2017-11-30 02:57:37
【问题描述】：

我有一个来自 CMS 的字符串，如下所示：

厂商建议零售价基准价格†

字符串不可变，我需要替换包裹在上标标签周围的 †，如下所示：

<sup>†</sup>

但是，使用 str.replace 方法，我正在使用：

var superLabel = str.replace(new RegExp('†'), '<sup>†</sup>');

superLabel 返回这个：MSRP Base Price †

【问题讨论】：

这还不够清楚。字符串是否总是以“MSRP Base Price”开头？
是的@GeorgeJempty

标签： javascript html regex reactjs

【解决方案1】：

您在问题中提到了 React。 React 会自动解码你的字符串以避免 XSS 攻击。

您需要使用dangerouslySetInnerHTML 来设置您的值。

例子：

// Does not work
const string = '<sup>†</sup>';
return <div>{string}</div>;

// Works
const string = '<sup>†</sup>';
return <div dangerouslySetInnerHTML={string} />;

不过要小心并确保您的输入是安全的。

【讨论】：

我得到一个“只能设置children 或props.dangerouslySetInnerHTML 之一。”来自
试试<p className={styles.priceLabel} dangerouslySetInnerHTML={this.handlePriceLabel(priceLabel)} />
@klugjo 您的建议导致了正确答案。我只需要像这样返回 html：在 this.handlePriceLabel 中返回 {__html: superLabel}

【解决方案2】：

除了我不熟悉的 React 答案中提到的之外，以下是一种满足您需要的方法。

var fromCMSPrefix = 'MSRP Base Price'
var fromCMS = 'MSRP Base Price †';
var superLabel = '<sup>' + fromCMS.substr(fromCMSPrefix.length).trim() + '</sup>';

这是另一个：

var fromCMS = 'MSRP Base Price †';
var superLabel = '<sup>' + fromCMS.replace('MSRP Base Price', '').trim() + '</sup>';

【讨论】：