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"

そしてこれをrenderメソッドで返しますか？

@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の解析はエラーが発生しやすく、時間がかかり、セキュリティに影響を与える可能性があります。本質的に、dangerlySetInnerHTMLよりも安全ではありません。

活字ケースでは少し問題になる可能性があります

— mlb

12の火星2015年、午後9時37分で、ベン・アルパート[email protected]は書きました：

分割関数を正規表現で使用してから、次のようにキャプチャされたパーツを置き換えることができます。

var Parts = "私は牛です。牛はmooと言います。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 ：

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>

同様の問題があり、reactポータルで解決しました。ノードを簡単に見つけるために、文字列をdivに置き換え、createPortalを使用してreactコンポーネントをその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マークアップがあり、そのマークアップ内の特定の場所に反応コンポーネントを配置したいと思います。
ポータルを使用するよりもライブラリを使用する方が良いと思いますか？ ポータルが行うことは、通常のコンポーネントをレンダリングするよりも費用がかからない最も近いノードではなく、別のノード内にコンポーネントをレンダリングすることだと思います。追加の手順は、ネイティブjsreplaceで実行できる文字列を置き換えることだけです。
私は何かが足りないのですか？ 代わりにライブラリを使用することに何か利点はありますか？

@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 />);

タイプスクリプトを使用したアプローチ：

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>
そしてreact内で、正規表現を使用して\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では少し面倒ですが、誰が気にしますか😂

💗正規表現とマップが、これはサイコーきれいにします。 💗💗💗

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文字列をサニタイズするためのhtml-react-parserを実装して、ターゲットとなるマークアップを見つけ、それをJSXコンポーネントに変換するという素晴らしい組み合わせを見つけました-例として、渡された小道具を使用したRebassを使用します。 2つのパッケージは、独自のパーサーをロールするオーバーヘッドを回避するのに役立ちます。サニタイズなしでこのパーサーパッケージをお勧めしません。 これに苦労している人のために、おそらくこのcodepenの価値を調べてください： 。 改善に関するフィードバックも大歓迎です。

ねえジェシー、
これは、テキストを取得して次のように変換するための非常に優れたコンボのようです。
コンポーネントを反応させてください！ の部品を交換するのに間違いなく良いでしょう
コンポーネントを含む文字列。

共有していただきありがとうございます。

JAMstackサイトで、Markdownをコンポーネントに変えるのにも役立ちます。

よろしくお願いします、
デレク

デレク・R・オースティン、PT、DPT、MS、BCTMB、LMT、CSCS

LinkedInに参加してください： //www.linkedin.com/in/derek-austin/

水、2020年2月26日には、16:35ジェシールイス[email protected]は書きました：

だから私はHTMLをサニタイズするためにDOMPurifyを実装する素晴らしい組み合わせを見つけました
html-react-parserを含む文字列で、ターゲットとなるマークアップを検索して変換します
JSXコンポーネントへ-例として、渡された小道具を使用したRebassを使用します。
非常にうまく出てきました、2つのパッケージはオーバーヘッドを回避するのに役立ちます
独自のパーサーをローリングする場合、このパーサーパッケージはお勧めしません
消毒なし。 これに苦労している人のためにまだ多分スコープアウト
それが価値があるもののためのこのcodepen：
https://codesandbox.io/s/eager-wiles-5hpff。 改善に関するフィードバック
とても感謝しています。

—
コメントしたのでこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/facebook/react/issues/3386?email_source=notifications&email_token=AMV42QTV4FDXZIFXCGB3NZDRE3OATA5CNFSM4A5VRBI2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2Z
または購読を解除する
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から抽出したテキストからフォーマット（フォントの色、リンク）を適用して@メンションを作成すること@メンションがある場合、エラーが発生します。

/////テキストの例： _hey何が起こったのか@ -id：1-すべて大丈夫??
////その配列をlistusers、例：[idusuario： "1"、usuario： "@luigbren"、format： "@ -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
};

このように、コードは、テキストに言及が1つしかない場合にのみうまく機能します。たとえば、「_ hey what going @ -id：1- all ok ?? _」ですが、複数の言及を配置するとエラーが発生します。 、例： '_ hey何が起こったのか@ -id：1-すべて大丈夫?? @ -id：2- @ -id：3 -_'...エラー：

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] ?

[オブジェクトオブジェクト]が誰なのか本当にわかりませんか？ 「AreyouOkay @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>.

（実際には配列になるため、キーが必要です。reactは、キーのない配列要素を好みません。）

このパッケージhttps://www.npmjs.com/package/regexify-string以外は何も機能しませんでした

私も。 それらすべてを試してみましたが、このパッケージのみが機能します。 ありがとう！