是否可以更改字符串中子字符串的颜色，或者如果它是一个设置为字符串的属性，则将其设置为不同的html标记？

utugiqy6 于 2022-11-20 发布在其他

关注(0)|答案(1)|浏览(164)

拥有一个接受一个字符串作为道具的React组件：

interface MyProps {
  myInput: string;
}

export function MyComponent({ myInput }: MyProps) {
   ...
   return (
     <div>
       {myInput}
     </div>
   );
};

这个组件在其他地方使用：

<MyComponent myInput="please contact us at test@test.com" />

我的问题是，我们能不能在这种情况下改变电子邮件地址的颜色？例如，变成蓝色。
或者更好的方法是，将文本换行为：

<a href="mailto:test@test.com" target="_blank">
   test@test.com
</a>

如果道具的类型为string，不确定是否可以执行类似的操作。

Html

来源：https://stackoverflow.com/questions/74489144/is-it-possible-to-change-the-color-of-a-substring-in-a-string-or-set-it-as-diffe

1条答案

按热度按时间

alen0pnh1#

当然，您可以根据您提供的字符串来执行此操作，但将电子邮件地址作为MyComponent的单独属性提供会容易得多。
在不更改组件的情况下，我将使用一些简单的RegExp从字符串中获取电子邮件，然后您就可以对它执行任何操作。
下面是一个不完整和简化RegExp的快速示例：

const SUPER_SIMPLE_EMAIL_REGEX = /[a-z0-9.]{1,}@test.com/gi; // Don't use this one

export function MyComponent({ myInput }: MyProps) {
   const match = myInput.match(SUPER_SIMPLE_EMAIL_REGEX);

  if (!match.length) {
    return (
      <div>
        {myInput}
      </div>
    );
  }

  const textWithoutEmail = myInput.replace(match[0], '');

  return (
    <div>
      <span>{textWithoutEmail}</span>
      <a href={`mailto:${match[0]}`} target="_blank">
        match[0]
      </a>
    </div>
  );

};

这是一个非常简单的解决方案，但我认为您可以在您的情况下使用它。

赞(0）回复(0）举报 2022-11-20

我来回答

是否可以更改字符串中子字符串的颜色，或者如果它是一个设置为字符串的属性，则将其设置为不同的html标记？

1条答案

相关问题

热门标签

最新问答