Reactjs 在JSX中用标记替换字符串的一部分

我试图用JSX标记替换字符串的一部分，如下所示：

render: function() {
    result = this.props.text.replace(":",<div className="spacer"></div>);
    return (
         <div>        
             {result}
         <div>        
    );
}

---

有没有办法解决这个问题，或者用JSX标记替换字符串的某些部分？

当您将JSX元素作为第二个参数传递给

replace（）

时，该元素将转换为字符串，因为

replace（）

需要一个字符串作为第二个参数。您需要做的是将字符串转换为字符串数组和JSX元素。因此，您的

结果

变量应该包含类似

['Lorem'，'ipsum']

的内容

大概是这样的：

function flatMap(array, fn) {
  var result = [];
  for (var i = 0; i < array.length; i++) {
    var mapping = fn(array[i]);
    result = result.concat(mapping);
  }
  return result;
}

var Comp = React.createClass({
  render: function () {
    var result = 'Lorem : ipsum';
    result = flatMap(result.split(':'), function (part) {
      return [part, <div>spacer</div>];
    });
    // Remove the last spacer
    result.pop();
    return (
      <div>        
        {result}
      </div>
    );
  }
});

function replaceByComponent(string, component) {
  const variable = string.substring(
    string.lastIndexOf("{{") + 2, 
    string.lastIndexOf("}}")
  );
  const strParts = string.split(`{{${variable}}}`);
  const strComponent = strParts.map((strPart, index) => {
    if(index === strParts.length - 1) {
      return strPart
    }
    return (   
      <>
        {strPart}
        <span>
          {component}
        </span>
      </>
    )
  })
  return strComponent
}

函数平面图（数组，fn）{
var结果=[]；
对于（var i=0；i

以下内容也应该有效（假设ES6），唯一的细微差别是文本实际上被包装在一个DIV元素中，而不是在它前面，假设您将使用CSS作为实际间距，这应该不是问题

const result = this.props.text.split(':').map(t => {
  return <div className='textItem'>{t}</div>;
});

constresult=this.props.text.split（'：'）.map（t=>{
返回{t}；
});

如果您还希望能够在替换中进行替换（例如，突出显示URL中的搜索词），请查看我创建的这个节点模块-

我有一个更常见的任务-按自定义标记包装所有（英语）单词。 我的解决方案：

render() {
    const searchValue = "an";
    const searchWordRegex = new RegExp(searchValue, "gi");
    const text =
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text";
    return (
      <div>
        {text.split(searchWordRegex).length > 1
          ? text.split(searchWordRegex).map((chunk, index) => {
              if (chunk !== "") {
                return index === 0 &&
                  ! new RegExp("^" + searchValue, "gi").test(text) ? (
                  chunk
                ) : (
                  <span key={index}>
                    <span
                      className="highlight"
                      style={{
                        fontWeight: "bold"
                      }}
                    >
                      {searchValue.charAt(0).toUpperCase() +
                        searchValue.slice(1)}
                    </span>
                    {chunk}
                  </span>
                );
              } else {
                return null;
              }
            })
          : text}
      </div>
    );
  }

类WrapWords扩展React.Component{
render（）{
const text=this.props.text；
常量isEnglishWord=/\b（[-'a-z]+）\b/ig；
const CustomWordTag='word'；
const byWords=text.split（isEnglishWord）；
返回(
{
byWords.map（word=>{
if（word.match（isEnglishWord））{
返回{word}；
}
返回词；
})
}
);
}
}
//渲染它
ReactDOM.render(
,
document.getElementById（“react”）
);
经过一些研究，我发现现有的库不符合我的要求。当然，我也写了自己的：


它很容易使用。您的案例示例：

let result = processString({
    regex: /:/gim,
    fn: () => <div className="spacer"></div>
})(this.props.test);

let result=processString({
正则表达式：/：/gim，
fn:（）=>
})（这是道具测试）；
公认的答案是5岁。针对这个问题，创建了一个问题，并基于一名在React上工作的Facebook员工提供的解决方案

使用react string replace，以下是解决问题的方法

const reactStringReplace = require('react-string-replace');

const HighlightNumbers = React.createClass({
  render() {
    const content = 'Hey my number is 555:555:5555.';
    return (
      <span>
        {reactStringReplace(content, ':', (match, i) => (
          <div className="spacer"></div>
        ))}
      </span>
    );
  },
});

const reactStringReplace=require（'react-string-replace'）；
const HighlightNumbers=React.createClass({
render（）{
const content=‘嘿，我的号码是555:555:5555’；
返回(
{reactStringReplace（内容“：”，（匹配，i）=>(
))}
);
},
});
带有挂钩的示例：

import React, { useEffect, useState, useRef } from 'react'

export function Highlight({ value, highlightText }) {
  const [result, resultSet] = useState(wrap())

  const isFirstRun = useRef(true) 

  function wrap() {
    let reg = new RegExp('(' + highlightText + ')', 'gi')
    let parts = value.split(reg)

    for (let i = 1; i < parts.length; i += 2) {
      parts[i] = (
        <span className='highlight' key={i}>
          {parts[i]}
        </span>
      )
    }
    return <div>{parts}</div>
  }

  useEffect(() => {
    //skip first run
    if (isFirstRun.current) {
      isFirstRun.current = false
      return
    }
    resultSet(wrap())
  }, [value, highlightText])

  return result
}

import React，{useffect，useState，useRef}来自“React”
导出函数高亮显示（{value，highlightText}）{
const[result，resultSet]=useState（wrap（））
const isFirstRun=useRef（真）
函数换行（）{
let reg=new RegExp（“（“+highlightText+”）”，“gi”）
让零件=值。拆分（reg）
对于（设i=1；i{
//跳过第一次运行
if（isFirstRun.current）{
isFirstRun.current=false
返回
}
结果集（wrap（））
}，[value，highlightText]）
返回结果
}
为jsx编写了一个实用函数

const wrapTags = (text: string, regex: RegExp, className?: string) => {
  const textArray = text.split(regex);
  return textArray.map(str => {
    if (regex.test(str)) {
      return <span className={className}>{str}</span>;
    }
    return str;
  });
};


const wrapTags=（text:string，regex:RegExp，className？：string）=>{
const textArray=text.split（regex）；
返回textArray.map（str=>{
if（正则表达式测试（str））{
返回{str}；
}
返回str；
});
};
我找到了以下不包括第三方库或正则表达式的简单解决方案，也许它仍然可以帮助某些人

主要是使用.replace（）将字符串替换为以字符串形式编写的常规html，如：

text.replace('string-to-replace', '<span class="something"></span>')

我认为这是最轻的完美解决方案：

render() {
    const searchValue = "an";
    const searchWordRegex = new RegExp(searchValue, "gi");
    const text =
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text";
    return (
      <div>
        {text.split(searchWordRegex).length > 1
          ? text.split(searchWordRegex).map((chunk, index) => {
              if (chunk !== "") {
                return index === 0 &&
                  ! new RegExp("^" + searchValue, "gi").test(text) ? (
                  chunk
                ) : (
                  <span key={index}>
                    <span
                      className="highlight"
                      style={{
                        fontWeight: "bold"
                      }}
                    >
                      {searchValue.charAt(0).toUpperCase() +
                        searchValue.slice(1)}
                    </span>
                    {chunk}
                  </span>
                );
              } else {
                return null;
              }
            })
          : text}
      </div>
    );
  }

render（）{
const searchValue=“an”；
const searchWordRegex=新的RegExp（searchValue，“gi”）；
常量文本=
“Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是行业标准的虚拟文本”；
返回(
{text.split（searchWordRegex）.length>1
？text.split（searchWordRegex）.map（（区块，索引）=>{
如果（块！==“”）{
返回索引===0&&
！new RegExp（“^”+searchValue，“gi”）。测试（文本）(
大块
) : (
{searchValue.charAt（0.toUpperCase（））+
searchValue.slice（1）}
{chunk}
);
}否则{
返回null；
}
})
：text}
);
}

这是一份工作报告

除了这个解决方案外，网络世界中没有任何东西对我有效-

使用React、字符串和不具有任何其他依赖项

regexifyString({
    pattern: /\[.*?\]/gim,
    decorator: (match, index) => {
        return (
            <Link
                to={SOME_ROUTE}
                onClick={onClick}
            >
                {match}
            </Link>
        );
    },
    input: 'Some text with [link]',
});

regexifyString({
模式：/\[.\]/gim，
装饰者：（匹配，索引）=>{
返回(
{match}
);
},
输入：“带有[链接]的某些文本”，
});
你们使用的是复杂的方法，请保持简单：

function replaceJSX(str, find, replace) {
    let parts = str.split(find);
    for(let i = 0, result = []; i < parts.length; i++) {
        result.push(parts[i]);
        result.push(replace);
    }
    return result;
}

函数replaceJSX（str、find、replace）{
让零件=str.split（find）；
for（设i=0，结果=[]；i

用法
replaceJSX（变量“：”，
）；
replaceJSX(variable, ":", <br />);

function replaceByComponent(string, component) {
  const variable = string.substring(
    string.lastIndexOf("{{") + 2, 
    string.lastIndexOf("}}")
  );
  const strParts = string.split(`{{${variable}}}`);
  const strComponent = strParts.map((strPart, index) => {
    if(index === strParts.length - 1) {
      return strPart
    }
    return (   
      <>
        {strPart}
        <span>
          {component}
        </span>
      </>
    )
  })
  return strComponent
}