React: 문자열의 일부를 구성 요소로 바꾸는 방법은 무엇입니까?

다음과 같이 작동해야 합니다.

const escapeRE = new RegExp(/([.*+?^=!:$(){}|[\]\/\\])/g)
const safeRE = (string) => {
  return string.replace(escapeRE, "\\$1")
}

class Hightlight extends Component {
  static propTypes = {
    match : PropTypes.string,
    string : PropTypes.string,
  }

  render() {
    return (
      <span
        dangerouslySetInnerHTML={{
          __html : string.replace(safeRE(this.props.match), "<strong className\"match\">$1</strong>")
        }} />
    )
  }
}

예, dangerouslySetInnerHTML 을 남용할 생각을 했지만 이 아이디어가 마음에 들지 않습니다. 이 방법은 합당한 이유로 위험한 것으로 분류되었습니다.

문자열 내에서 jsx를 구문 분석하도록 React를 가르칠 방법이 없나요? React가 iE를 구문 분석하도록 하십시오.

var example = "this one word <span className="match" key={i++}>hello</span> is highlighted"

그리고 이것을 렌더 메소드에서 반환하시겠습니까?

@binarykitchen React 요소를 동적으로 구성할 수 있으며 여기에서 수행해야 하는 작업입니다. 문자열 교체만으로는 수행할 수 없습니다.

@syranide 예, 이미 알고 있습니다. 제 요점은: 이것이 좋은 JSX/React 기능이 아닐까요? 문자열을 구문 분석하고 내부의 모든 태그를 자식 React 구성 요소로 바꿉니다.

split 함수를 정규식과 함께 사용하고 다음과 같이 캡처된 부분을 바꿀 수 있습니다.

var parts = "I am a cow; cows say moo. MOOOOO.".split(/(\bmoo+\b)/gi);
for (var i = 1; i < parts.length; i += 2) {
  parts[i] = <span className="match" key={i}>{parts[i]}</span>;
}
return <div>{parts}</div>;

불분명한 경우 알려주십시오.

런타임에 JSX를 구문 분석하는 것은 오류가 발생하기 쉽고 느리며 보안에 영향을 미치기 쉽습니다. 본질적으로 위험하게 SetInnerHTML보다 안전하지 않을 것입니다.

그것은 유형 케이스에 약간의 문제가 될 수 있습니다.

— mlb

2015년 3월 12일 21시 37분에 Ben Alpert [email protected] 은 다음과 같이 썼습니다.

다음과 같이 split 함수를 정규식과 함께 사용한 다음 캡처된 부분을 바꿀 수 있습니다.

var parts = "나는 소입니다. 소는 무어라고 합니다. MOOOOO.".split(/(\bmoo+\b)/gi);
for (var i = 1; i < parts.length; i += 2) {
부품[i] = ;}반품

{부속}

;
불분명한 경우 알려주십시오.

—
이 이메일에 직접 회신하거나 GitHub에서 확인하세요.

프로그래밍 방식으로 문자열의 일부를 강조 표시하려고 할 때도 이 문제가 발생했습니다(예: <span> 태그로 교체). 위의 @spicyj 솔루션을 기반으로 모듈을 만들었습니다. 관심 있는 사람: iansinnott/react-string-replace

@iansinnott 공유 String.prototype.replace API가 필요하다는 것을 깨달았습니다(교체 기능 내에서 정규 표현식에 대한 개별 일치 그룹에 대한 액세스 필요). 변경 사항이 단순한 패치 이상(그리고 API 변경이 필요함)이 될 것이라는 것을 깨달았으므로 새 저장소를 만들었습니다. https://github.com/oztune/string-replace-to-array

react-string-replace 이 요구 사항에 맞지 않는 경우:

https://github.com/EfogDev/react-process-string

다음은 텍스트 문자열 내에서 키워드를 강조 표시하는 방법으로 저에게 효과적이었습니다.
위험한 HTML 설정:

/**
 * Find and highlight relevant keywords within a block of text
 * <strong i="7">@param</strong>  {string} label - The text to parse
 * <strong i="8">@param</strong>  {string} value - The search keyword to highlight
 * <strong i="9">@return</strong> {object} A JSX object containing an array of alternating strings and JSX
 */
const formatLabel = (label, value) => {
  if (!value) {
    return label;
  }
  return (<span>
    { label.split(value)
      .reduce((prev, current, i) => {
        if (!i) {
          return [current];
        }
        return prev.concat(<b key={value + current}>{ value }</b>, current);
      }, [])
    }
  </span>);
};

formatLabel('Lorem ipsum dolor sit amet', 'dolor');
// <span>Lorem ipsum <b>dolor</b> sit amet</span>

여러 값을 래핑할 수 있고 @richardwestenra 솔루션에 약간의 변경을 수행할 수 있도록 일부 패턴과 일치하는 언급을 위해 이와 같은 것이 필요했습니다. 누군가에게 유용할 수도 있습니다.

/**
 * Find and highlight mention given a matching pattern within a block of text
 * <strong i="7">@param</strong> {string} text - The text to parse
 * <strong i="8">@param</strong> {array} values - Values to highlight
 * <strong i="9">@param</strong> {RegExp} regex - The search pattern to highlight 
 * <strong i="10">@return</strong> {object} A JSX object containing an array of alternating strings and JSX
 */
const formatMentionText = (text, values, regex) => { 
    if (!values.length)
        return text;

    return (<div>
        {text.split(regex)
            .reduce((prev, current, i) => {
                if (!i)
                    return [current];

                return prev.concat(
                    values.includes(current)  ?
                        <mark key={i + current}>
                            {current}
                        </mark>
                        : current
                );
            }, [])}
    </div>);
};

const text = 'Lorem ipsum dolor sit amet [[Jonh Doe]] and [[Jane Doe]]';
const values = ['Jonh Doe', 'Jane Doe'];
const reg = new RegExp(/\[\[(.*?)\]\]/); // Match text inside two square brackets

formatMentionText(text, values, reg);
// Lorem ipsum dolor sit amet <mark>Jonh Doe</mark> and <mark>Jane Doe</mark>

비슷한 문제가 있었고 반응 포털로 해결했습니다. 노드를 쉽게 찾기 위해 문자열을 div로 바꾸고 createPortal을 사용하여 반응 구성 요소를 해당 div에 렌더링했습니다.

@rmtngh 왜 그렇게 해야 하는지 궁금합니다. 과분할 수도 있을 것 같습니다. 비 반응 코드를 인터레이스하고 있습니까?

이 문제에 대한 해결책과 관련하여 string-replace-to-array (저는 저자입니다)를 다시 추천하고 싶습니다. 여러 환경에서 전투와 시간 테스트를 거쳤습니다. 또한 매우 작습니다(전체 라이브러리는 https://github.com/oztune/string-replace-to-array/blob/master/string-replace-to-array.js 파일입니다).

다음은 정규식을 사용한 사용 예입니다.

import replace from 'string-replace-to-array'

// The API is designed to match the native 'String.replace',
// except it can handle non-string replacements.
replace(
  'Hello Hermione Granger...',
  /(Hermione) (Granger)/g,
  function (fullName, firstName, lastName, offset, string) {
    return <Person firstName={ firstName } lastName={ lastName } key={ offset } />
  }
)

// output: ['Hello ', <Person firstName="Hermione" lastName="Granger" key={ 0 } />, ...]

@oztune 답장을 보내주셔서 감사합니다. 이 경우 CMS의 wysiwyg 편집기에서 가져온 html 마크업 문자열이 있으며 해당 마크업 내부의 특정 위치에 반응 구성 요소를 배치하고 싶습니다.
포털을 사용하는 것보다 라이브러리를 사용하는 것이 더 낫다고 생각하십니까? 포털이 하는 일은 일반 구성 요소를 렌더링하는 것보다 비싸지 않은 가장 가까운 노드 대신 다른 노드 내부의 구성 요소를 렌더링하는 것이며 유일한 추가 단계는 기본 js 교체로 수행할 수 있는 문자열을 교체하는 것입니다.
내가 뭔가를 놓치고 있습니까? 대신 라이브러리를 사용하면 어떤 이점이 있습니까?

@rmtngh 당신이하려는 일에 달려 있다고 말하고 싶습니다. DOM 트리의 다른 영역에 일부 React 구성 요소를 뿌리려고 하고 트리가 React로 아직 렌더링되지 않은 경우 포털이 올바른 방법입니다. 내가 언급한 방법은 교체하려는 부분이 이미 React 구성 요소 내부에서 렌더링된 경우에 가장 유용합니다.

텍스트와 패턴이 주어진 노드의 배열을 반환하는 코드는 다음과 같습니다.

const highlightPattern = (text, pattern) => {
  const splitText = text.split(pattern);

  if (splitText.length <= 1) {
    return text;
  }

  const matches = text.match(pattern);

  return splitText.reduce((arr, element, index) => (matches[index] ? [
    ...arr,
    element,
    <mark>
      {matches[index]}
    </mark>,
  ] : [...arr, element]), []);
};

@wojtekmaj 감사합니다
패턴의 그룹에 대한 내 버전:

const replacePatternToComponent = (text, pattern, Component) => {
  const splitText = text.split(pattern);
  const matches = text.match(pattern);

  if (splitText.length <= 1) {
    return text;
  }

  return splitText.reduce((arr, element) => {
      if (!element) return arr;

      if(matches.includes(element)) {
        return [...arr, Component];
      }

      return [...arr, element];
    },
    []
  );
};

const string = 'Foo [first] Bar [second]';
const pattern = /(\[first\])|(\[second\])/g;

replacePatternToComponent(string, pattern, <Component />);

typescript를 사용하여 접근:

const formatString = (
  str: string,
  formatingFunction?: (value: number | string) => React.ReactNode,
  ...values: Array<number | string>
) => {
  const templateSplit = new RegExp(/{(\d)}/g);
  const isNumber = new RegExp(/^\d+$/);
  const splitedText = str.split(templateSplit);
  return splitedText.map(sentence => {
    if (isNumber.test(sentence)) {
      const value = values[Number(sentence)];
      return Boolean(formatingFunction) ? formatingFunction(value) : value;
    }
    return sentence;
  });
};

사용 예:

const str = '{0} test {1} test';
formatString(str, value => <b>{value}</b>, value1, value2);

결과:
<b>value1</b> test <b>value2</b> test

@rmtngh createportal을 통해 마크업 강화를 달성한 방법에 대한 샘플을 제공할 수 있습니까? 나도 똑같이 하려고 해요.

@Dashue 아이디어는 HTML 문자열과 얼마나 많은 제어 권한이 있는지에 따라 마크업 내부에 반응 구성 요소에 대한 일부 대상을 만드는 것입니다.
서버 측에서 변경할 수 있다면 요소에 ID를 부여할 수 있습니다. 다음과 같은 것:
<div id="component_target_1"></div>
그리고 반응 내부에서 정규 표현식으로 \id="(component_target_\d)"\g 를 찾고 ID(state.targets)를 저장하고 구성 요소를 렌더링합니다.

let mappedComponents
if(this.state.targets && this.state.targets.length){
            mappedComponents = this.state.targets.map((id,index)=><MyComponent id={id} key={id} />)
        }

다음은 "MyComponent"의 샘플입니다.

import React from 'react'
import ReactDOM from 'react-dom'

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props)
  }
  getWrapper(){
    return document.getElementById(this.props.id)
  }
  render() {
    if(!this.getWrapper()) return null

    const content = <div>
        Hello there! I'm rendered with react.
      </div>

      return ReactDOM.createPortal(
        content,
        this.getWrapper(),
      );
  }
}

HTML 문자열을 많이 제어할 수 없는 경우에도 동일한 접근 방식을 사용할 수 있습니다. 일부 요소를 찾고 대상 요소를 문자열에 삽입해야 할 수도 있습니다.

멋진 스레드 녀석들!

저는 이 스레드의 아이디어 중 일부를 구현하는 간단한 React Text Highlighter 펜을 만들었습니다(몇 가지 추가 마법과 함께...). 향후 방문자가 유용하게 사용할 수 있기를 바랍니다.

다음은 map 사용하는 솔루션입니다.
@sophiebits 솔루션을 여기에서 분기:

const reg = new RegExp(/(\bmoo+\b)/, 'gi');
const parts = text.split(reg);
return <div>{parts.map(part => (part.match(reg) ? <b>{part}</b> : part))}</div>;

아름다운 솔루션 @rehat101

여기 내 경우에 가장 잘 작동하는 것이 있습니다. 공백 문자로 나누고 특정 단어를 찾는 것입니다.

HTML에서 조금 지저분하지만 누가 상관 😂

💗 RegExp 와 지도 는 이것을 아주 깨끗하게 만듭니다. 💗💗💗

const Speech = ({ speech, speeches, setSpeeches, i, text }) => {

const highlightRegExp = new RegExp(
    /you|can|do|it|puedes|hacerlo|pingüinos|son|bellos/,
    "gi"
  );
  const delineator = " ";
  const parts = text.split(delineator);

  return (
        <div>
          {parts.map(part =>
            part.match(highlightRegExp) ? <b>{part + " "}</b> : part + " "
          )}
        </div>
  );
};

아름다워 @rehat101

react-string-replace 이 요구 사항에 맞지 않는 경우:

https://github.com/EfogDev/react-process-string

훌륭한! 대부분의 경우 실제로 원래 문자열에 액세스해야 하기 때문에 매우 유용합니다.

@nullhook 의 솔루션을 약간 리팩토링하여 쿼리의 변수를 허용하고 Google 검색 자동 완성의 동작을 모방합니다.
js const highlightQueryText = (text: string, filterValue: string) => { const reg = new RegExp(`(${filterValue})`, 'gi'); const textParts = text.split(reg); return ( <span style={{ fontWeight: 600 }}> {textParts.map(part => (part.match(reg) ? <span style={{ fontWeight: 'normal' }}>{part}</span> : part))} </span> ); };

그래서 DOMPurify를 구현하여 html-react-parser로 html 문자열을 정리하여 대상 마크업을 찾고 JSX 구성 요소로 변환하는 좋은 조합을 찾았습니다. 전달된 props와 함께 Rebass를 예로 사용합니다. 꽤 멋지게 나왔습니다. 두 개의 패키지는 자신의 파서를 롤링하는 오버헤드를 피하는 데 도움이 될 것입니다. 저는 이 파서 패키지를 위생 처리하지 않는 것이 좋습니다. 이것으로 어려움을 겪고 있는 사람들을 위해 https://codesandbox.io/s/eager-wiles-5hpff 에서 이 코드펜의 가치를 살펴보십시오

헤이 제시,
텍스트를 가져와서
반응 구성 요소! 확실히 부품교체용으로 좋을듯
구성 요소가 있는 문자열.

공유해 주셔서 감사합니다.

JAMstack 사이트에서 Markdown을 구성 요소로 전환하는 데 유용할 수도 있습니다.

친애하는,
데릭

데릭 R. 오스틴, PT, DPT, MS, BCTMB, LMT, CSCS

LinkedIn에서 저와 함께하세요: https://www.linkedin.com/in/derek-austin/

2020년 2월 26일 수요일 오후 4:35 Jesse Lewis [email protected]에서 다음과 같이 썼습니다.

그래서 DOMPurify를 구현하여 HTML을 삭제하는 좋은 조합을 찾았습니다.
html-react-parser를 사용하여 대상 마크업을 찾고 변환하는 문자열
JSX 구성 요소에 - 전달된 소품과 함께 Rebass를 예로 사용합니다.
꽤 멋지게 나왔고 두 패키지는 오버 헤드를 피하는 데 도움이 될 것입니다.
자신의 파서를 롤링하려면 이 파서 패키지를 권장하지 않습니다.
살균하지 않고. 이것으로 어려움을 겪고있는 사람들을 위해 아직 범위를 벗어 났을 수 있습니다.
가치가 있는 이 codepen:
https://codesandbox.io/s/eager-wiles-5hpff. 개선 사항에 대한 피드백
너무 감사합니다.

—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/facebook/react/issues/3386?email_source=notifications&email_token=AMV42QTV4FDXZIFXCGB3NZDRE3OATA5CNFSM4A5VRBI2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXH
또는 구독 취소
https://github.com/notifications/unsubscribe-auth/AMV42QXARIOKOYSJ4C5IFQLRE3OATANCNFSM4A5VRBIQ
.

split 함수를 정규식과 함께 사용하고 다음과 같이 캡처된 부분을 바꿀 수 있습니다.

var parts = "I am a cow; cows say moo. MOOOOO.".split(/(\bmoo+\b)/gi);
for (var i = 1; i < parts.length; i += 2) {
  parts[i] = <span className="match" key={i}>{parts[i]}</span>;
}
return <div>{parts}</div>;

불분명한 경우 알려주십시오.

이것은 잘 작동합니다. Angular에서 작동하게 하는 방법은 없나요? 귀하의 코드를 사용하여 이에 대한 질문을 게시했습니다.
https://stackoverflow.com/questions/60889171/wrap-certain-words-with-a-component-in-a-contenteditable-div-in-angular

안녕하세요 친구 여러분, 도움이 필요합니다. 저는 React Native를 사용하고 있으며 DB에서 추출한 텍스트에서 @mentions 를 만들기 위해 형식(글꼴 색상, 링크)을 적용하기 위해 텍스트에서 추출한 것입니다. 텍스트가 1개의 단일 일치 항목을 찾으면 교체가 모두 좋지만! 텍스트에 @멘션 이 여러 개 있으면 오류가 발생합니다.

/////텍스트 예: _헤이 @-id:1- 모든 것이 정상 ??
//// listusers 배열, 예: [idusuario: "1", usuario: "@luigbren", 형식: "@-id:1-".....]

const PatternToComponent = (text, usuarios,) => {
    let mentionsRegex = new RegExp(/@-(id:[0-9]+)-/, 'gim');
    let matches = text.match(mentionsRegex);
    if (matches && matches.length) {
        matches = matches.map(function (match, idx) {
            let usrTofind = matches[idx]
            //////////////////////////////////////////////////////////////////
            const mentFormat = listusers.filter(function (item) { 
                const itemData = item.format;
                return itemData.indexOf(usrTofind) > -1;
            });
            if (mentFormat.length > 0) {
                let idusuario = mentFormat[0].idusuario
                let replc = mentFormat[0].usuario

                console.log(usrTofind) //// here find @-id:1-
                console.log(replc)   //// here is <strong i="12">@luigbren</strong> for replace

                ////////// now here replace part of the string, @-id:1- with a <Text> component 
                ///////// with <strong i="13">@luigbren</strong> and the link, this is repeated for every <strong i="14">@mention</strong> found

                parts = text.split(usrTofind);
                for (var i = 1; i < parts.length; i += 2) {
                  parts[i] = <Text key={i} style={{ color: '#00F' }} onPress={() => { alert('but this is'); }}>{replc}</Text>;
                }
                return text = parts;
                /////////////////////////////////////////////////////////////////////
            } else {
                return text
            }
        });
    } else {
        return text
    }
    return text
};

이런 식으로 코드는 텍스트에 멘션이 하나만 있는 경우에만 잘 작동합니다. 예를 들어 '_hey what broken @-id:1- everything ok ??_' , 그러나 둘 이상의 멘션을 배치하면 오류가 발생합니다. , 예: '_이봐 무슨 일이 있었어 @-id:1- 다 괜찮아 ?? @-id:2- @-id:3-_' ... 오류: TypeError: text.split은 함수가 아니며 if 대신 _parts = text.split(usrTofind);_ _parts = text.toString을 배치합니다. ().split(usrTofind);_ [Object Object] 오류가 발생합니다.

html-react-parser 를 사용하여 문자열을 구문 분석한 다음 노드 이름으로 jsx 구성 요소로 바꿀 수 있습니다. 이 유형의 대체를 사용하면 문자열을 대체하여 반응 요소를 동적으로 사용할 수 있습니다.

      parse(body, {
        replace: domNode => {
          if (domNode.name === 'select') { // or
            return React.createElement(
              Select, // your react component
              { },
              domToReact(domNode.children)
            );
          }
        }

누군가 문자열에서 react-router-dom 를 어떻게 바꿀 수 있는지 알려주세요.

예시:

var text = "Are You okay <strong i="9">@sara</strong> ?";

var href= <Link to={{
  pathname: '/user/sara',
}}> <strong i="10">@sara</strong> </Link>;

var replace = text.replace("@sara", href);

//output : Are You okey [Object Object] ?

[Object Object]가 누군지 정말 모르겠어요? 나는 "괜찮아요 @sara"라고 말하지만 이 코드는 다른 사람을 불렀습니다!

react-native 에 거의 같은 질문이 있습니다. 누구든지 저를 도와주시면 감사하겠습니다.

내 질문

이 패키지를 제외하고는 아무것도 작동하지 않았습니다. https://www.npmjs.com/package/regexify-string

나는이 기능을 사용하고 있습니다 :

export const replaceWithHtml = (
  text: string,
  textToReplace: string,
  replaceValue: any,
): any[] => {
  const delimiter = '|||||'
  return text && text.includes(textToReplace)
    ? text
        .replace(textToReplace, `${delimiter}${textToReplace}${delimiter}`)
        .split(delimiter)
        .map((i) => {
          if (i === textToReplace) {
            return replaceValue
          } else {
            return i || null
          }
        })
    : text
}

그와 같이:

const text = 'This is an [icon]'
replaceWithHtml(
      text,
      '[icon]',
      <i className="icon-cogs" />,
)

특정 키워드를 특정 요소로 대체하는 간단한 보간 도구를 원했습니다.

내 출력의 요소 수를 줄이기 위해 React.Fragment 있습니다.

const interpolate = (text, values) => {
  const pattern = /([$0-9]+)/g
  const matches = text.match(pattern)
  const parts = text.split(pattern)

  if (!matches) {
    return text
  }

  return parts.map((part, index) => (
    <Fragment key={part + index}>{matches.includes(part) ? values[part] : part}</Fragment>
  ))
}

// ...

<p>
  {interpolate('$1 with $2 is fun!', {
    $1: <em>Playing</em>,
    $2: <strong>JavaScript</strong>,
  })}
</p>

// <p><em>Playing</em> with <strong>JavaScript</strong> is fun!</p>

split() 아이디어에 대해 @sophiebits 에게 감사드립니다 🙏

@pedrodurek 의 솔루션을 기반으로 다음은 내 특정 요구 사항에 대한 것입니다(숫자 대신 읽을 수 있는 키로 번역).

export const insertComponentsIntoText = (
    str: string,
    replacements: {
        [key: string]: React.ReactNode
    }
) => {
    const splitRegex = new RegExp(/\[\[(\w*)\]\]/g);
    const parts = str.split(splitRegex);
    return parts.map(part => {
        if (replacements.hasOwnProperty(part)) {
            return replacements[part];
        }
        return part;
    });
};

예시:

insertComponentsIntoText(`"Please accept our [[privacyPolicyLink]] and [[termsLink].", {
    "privacyPolicyLink": <a key="privacyPolicyLink" href="/privacy">Privacy Policy</a>,
    "termsLink": <a key="termsLink" href="/terms">Terms and Conditions</a>
})

...된다...

Please accept our <a key="privacyPolicyLink" href="/privacy">Privacy Policy</a> and <a key="termsLink" href="/terms">Terms and Conditions</a>.

(실제로 배열이 되기 때문에 키가 필요하고 반응은 키가 없는 배열 요소를 좋아하지 않습니다.)

이 패키지를 제외하고는 아무것도 작동하지 않았습니다. https://www.npmjs.com/package/regexify-string

저도 요. 이 패키지만 작동하도록 모두 시도했습니다. 감사합니다!