发票【24979525、24979524】货物名称校验不通过\n发票【95216524】验真成功、手机号校验通过\n 在react框架中提取右边文本【】中的多个发票号码,也可能只有一个,对号码进行超链接设置,再替换到文本中原本位置
时间: 2023-06-24 10:08:34 浏览: 40
可以通过正则表达式来匹配文本中的发票号码,然后使用 React 的 `map` 函数来遍历所有匹配到的发票号码并生成超链接。
以下是示例代码:
```jsx
const text = '发票【24979525、24979524】货物名称校验不通过\n发票【95216524】验真成功、手机号校验通过';
// 匹配所有的发票号码
const regex = /【(.*?)】/g;
const matches = text.match(regex);
// 生成超链接并替换原文本
const replacedText = matches.reduce((prev, match) => {
const invoiceNumbers = match.replace(/【|】/g, '').split('、'); // 提取发票号码
const links = invoiceNumbers.map((number) => (
<a href={`https://example.com/invoice/${number}`} target="_blank">
{number}
</a>
)); // 生成超链接
return prev.replace(match, links); // 替换原文本中的发票号码
}, text);
// 在 JSX 中渲染文本
<div>{replacedText}</div>
```
这段代码会将原始文本中的所有发票号码提取出来,并用超链接替换原始文本中的发票号码。最终渲染的文本中,所有的发票号码都被设置成了超链接。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)