javascript - 如何转换具有特定标识符的字符串？

Question

Input: 'text __city__ text __city__ text __city__'

Output: 'text <i>city</i> text <i>city</i> text <i>city</i>'

该特征的结果被传递到 dangerouslySetInnerHTML 。

这个组件是

<div dangerouslySetInnerHTML={{__html: content.replace(/(?:\r\n|\r|\n)/g, '<br />')}}></div>

针对此问题 ( link )。

我的功能是

const transformText = (text) => {
  const tmp = text.split('__');
  var res = '';
  var check = true;
  for (var i = 0; i < tmp.length-1; i++){
    check = !check;
    if (check) {
      res += '<i>'+tmp[i]+'</i>';
    } else if (tmp[i] != undefined){
      res += tmp[i];
    }
  }
  return res;
};

但将页面的其余部分分解到 IE11 浏览器中。

Answer 1

第 1 步:转换输入文本。

假设输入的格式为“text __city__ text __city__ ... text __city__" 按照您的示例。

const input = "text1 __paris__ text2 __london__ text3 __berlin__";
// the following will turn the input into an array of the form
// [ [text, city], [text, city], ... [text, city] ]
const pairs = input.slice(0, -2).split('__ ').map(pair => pair.split(' __'));

第 2 步:在 React 组件中使用数组。

假设变量pairs 保存上面定义的文本/城市对，以下将是组件内的render 方法(如果它是基于类的)。

render() {
  return (
    <ul>
      {pairs.map((pair, index) => {
        return <li key={index}>{pair[0]} <i>{pair[1]}</i></li>;
      })}
    </ul>
  );
}