实现物流信息中的电话号码高亮

小白终成大白

---

目录

小白终成大白

前言

一、实现效果

二、代码部分

总结

实现思路

---

---

前言

uniapp做app

在做商城的物流信息，显示出来很单调，电话文字堆在一起，想起淘宝都是蓝色的字，也想实现一下

---

一、实现效果

实现前

实现后

二、代码部分

代码如下（示例）：

<rich-text :nodes="processText(item.context)"></rich-text>

function processText(originalText) {
  const numberRegex = /(1[3-9]\d{9}|0\d{2,3}-?\d{7,8})/g;
  let lastIndex = 0;
  const nodes = [];
  let match;

  while ((match = numberRegex.exec(originalText)) !== null) {
    // 添加普通文本部分
    if (match.index > lastIndex) {
      nodes.push({
        type: 'text',
        text: originalText.slice(lastIndex, match.index)
      });
    }

    // 添加蓝色数字部分
    nodes.push({
      type: 'text',
      text: match[0],
      style: 'color:#007AFF;'
    });

    lastIndex = numberRegex.lastIndex;
  }

  // 添加剩余普通文本
  if (lastIndex < originalText.length) {
    nodes.push({
      type: 'text',
      text: originalText.slice(lastIndex)
    });
  }

  // 转换为uniapp rich-text要求的节点格式
  return nodes.map(node => {
    const isPhoneNumber = !!node.style;
    
    return isPhoneNumber ? {
      name: 'span',
      attrs: { style: node.style },
      children: [{ type: 'text', text: node.text }]
    } : {
      type: 'text',
      text: node.text
    };
  });
}

---

总结

实现思路

1. 识别文本中的电话号码：用正则匹配手机号（如 1[3-9]\d{9}）。

2. 高亮显示号码 

3. 后续会增加点击复制 或者直接调用系统打电话