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

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>
        )
  }
})

标签： javascriptreactjs

Answer 1

我用了replace

完整代码示例：https://codepen.io/yunyong/pen/qveLZL

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