遇到个需要对文本内容进行处理的需求，文本中的电话号码要可以直接调电话拨打。这里记录下处理方法。
这里我用到了react-native-hyperlinked-text这个库，但是数据很大虽说它自己就可以匹配正则，但是发现匹配电话号码的正则会非常卡慢，几乎是卡死应用了，于是自己可以便对数据先进行一个预处理。在用其正则匹配高亮。
步骤
预处理数据
这里我是将原本的电话号码先提取出来，再变成特定的格式替换到文本里。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| formatTel = (text) => {
const formatText = text.match(/((((13[0-9])|(15[^4])|(18[0,1,2,3,5-9])|(17[0-8])|(147))\d{8})|((\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}))?/g)
let newText = text
const Tels = []
formatText.forEach((item) => {
if (item) {
Tels.push(item)
}
})
if (Tels.length > 0) {
Tels.map((item) => {
newText = newText.replace(item, `[${ item.toString() }](tel:${ item.toString() })`)
})
}
return newText
};
|
如原数据：
1
| 望好心人看到请联系13651881226、18616541654
|
处理后的数据：
1
| 望好心人看到请联系[13651881226](tel:13651881226)、[18616541654](tel:18616541654)
|
是不是很眼熟，对啊markdown的写法。
解析链接文本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| import { Linking} from "react-native"
import HyperlinkedText from "react-native-hyperlinked-text"
...
linking = (url) => {
Linking.canOpenURL(url).then(supported => {
if (!supported) {
console.log(`Can't handle url: ${ url}`)
} else {
return Linking.openURL(url)
}
}).catch(err => console.error("An error occurred", err))
};
...
<HyperlinkedText
linkDefs={[
{
regex: /\[(.*?)\]\((.*?)\)/mgi,
style: { color: "#1470CC" },
replaceText: (orig, text) => text,
onPress: (orig, text, url) => this.linking(url)
}
]}
>
{this.state.formatTel}
</HyperlinkedText>
...
|
ok,文本里的电话现在是高亮的，点击既可以调出电话了。