如何以不同的颜色显示文本的某些部分，即@和}之间的数据应使用不同的颜色

Question

想要以不同的颜色显示@和}之间的数据

示例：@ {data} @ {message}在“一个@ {data}和@ {message} @ {somedata}在“两个@ {somedata}

const data1 = [
      {name: 'one @{data} and @{message}'},
      {name: 'two @{somedata}'},
      {name: 'three @{data}'},
      {name: 'four @{data}'}
];

export default React.createClass({
  render() {
      return (
          <div>
          {data1.map(function(a) {
              return (
                  <p>{a.name}</p>
                )
            })}
          </div>
        )
  }
})

Answer 1

我使用了replace

full code sample : https://codepen.io/yunyong/pen/qveLZL

  <p dangerouslySetInnerHTML={ 
                    {__html:  a.name
                    .replace(/@{/gi, '<span style="color:red">')
                    .replace(/}/gi,'</span>')} 
                  }>
                    </p>