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 पार्स करने के लिए प्रतिक्रिया सिखाने के लिए कोई तरीका नहीं है? प्रतिक्रिया पार्स है iE

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

और इसे एक रेंडर विधि में वापस कर दें?

@binarykitchen आप गतिशील रूप से प्रतिक्रिया तत्वों का निर्माण कर सकते हैं और यही आपको यहां करने की ज़रूरत है, आप इसे केवल स्ट्रिंग प्रतिस्थापन के साथ नहीं कर सकते हैं।

@syranide हाँ, मुझे यह पहले से ही पता है। मेरा कहना है: क्या यह एक अच्छा JSX/रिएक्ट फीचर नहीं होगा? एक स्ट्रिंग को पार्स करें और किसी भी टैग को चाइल्ड रिएक्ट घटकों में बदल दें।

आप 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 की तुलना में अधिक सुरक्षित नहीं होगा।

यह टाइप केस के साथ थोड़ा सा मुद्दा हो सकता है

— एमएलबी

12 मार्च 2015 को, 21:37 बजे, बेन अल्परट नोटिफिकेशन @github.com ने लिखा:

आप स्प्लिट फ़ंक्शन को रेगेक्स के साथ उपयोग कर सकते हैं और फिर कैप्चर किए गए हिस्सों को प्रतिस्थापित कर सकते हैं, जैसे:

var part = "मैं एक गाय हूँ, गायें मू कहती हैं। MOOOOO।".split(/(\bmoo+\b)/gi);
के लिए (var i = 1; i < भागों। लंबाई; i += 2) {
भागों [i] = ;}वापसी

{भागों}

;
मुझे बताएं कि क्या यह अस्पष्ट है।

-
इस ईमेल का सीधे उत्तर दें या इसे GitHub पर देखें।

प्रोग्रामिंग के रूप में एक स्ट्रिंग के कुछ हिस्सों को हाइलाइट करने का प्रयास करते समय भी मैं इस मुद्दे में भाग गया (यानी <span> टैग के साथ प्रतिस्थापित करें)। मैंने उपरोक्त @spicyj के समाधान के आधार पर एक मॉड्यूल बनाना समाप्त कर दिया। रुचि रखने वाले किसी के लिए: iansinnott/react-string-replace

@iansinnott इसे साझा करने के लिए धन्यवाद। मैंने इसका उपयोग करना शुरू कर दिया, तब मुझे एहसास हुआ कि मुझे पूर्ण String.prototype.replace API की आवश्यकता होगी (प्रतिस्थापन फ़ंक्शन के भीतर एक regexp के लिए व्यक्तिगत मिलान समूहों तक पहुंच की आवश्यकता है)। मुझे एहसास हुआ कि परिवर्तन एक साधारण पैच से अधिक होगा (और एक एपीआई परिवर्तन की आवश्यकता है) इसलिए मैंने एक नया रेपो बनाया: 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 के साथ बदल दिया और उस div में createPortal का उपयोग करके अपने प्रतिक्रिया घटक को प्रस्तुत किया।

@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 आपके उत्तर के लिए धन्यवाद, इस मामले में मेरे पास एक सीएमएस के एक wysiwyg संपादक से आने वाले एचटीएमएल मार्कअप की एक स्ट्रिंग है और मैं उस मार्कअप के अंदर कुछ स्थानों पर प्रतिक्रिया घटकों को रखना चाहता हूं।
क्या आपको लगता है कि पोर्टल का उपयोग करने के बजाय पुस्तकालय का उपयोग करना बेहतर होगा? मुझे लगता है कि पोर्टल क्या करता है कि घटक को निकटतम नोड के बजाय किसी अन्य नोड के अंदर प्रस्तुत करना है जो सामान्य घटक को प्रस्तुत करने से अधिक महंगा नहीं होगा और स्ट्रिंग को प्रतिस्थापित करने के लिए एकमात्र अतिरिक्त कदम है जो देशी जेएस प्रतिस्थापन के साथ किया जा सकता है।
क्या मुझे कुछ याद आ रहा है? क्या इसके बजाय पुस्तकालय का उपयोग करने से कोई लाभ होगा?

@rmtngh मैं कहूंगा कि यह इस बात पर निर्भर करता है कि आप क्या करने की कोशिश कर रहे हैं। यदि आप अपने DOM ट्री के विभिन्न क्षेत्रों में कुछ रिएक्ट घटकों को छिड़कने की कोशिश कर रहे हैं, और ट्री को पहले से ही रिएक्ट के साथ प्रस्तुत नहीं किया जा रहा है, तो पोर्टल जाने का रास्ता है। जिस विधि का मैंने उल्लेख किया है वह सबसे उपयोगी है जब आप जिन भागों को बदलने का प्रयास कर रहे हैं, वे पहले से ही एक रिएक्ट घटक के अंदर प्रस्तुत किए गए हैं।

यहां वह कोड है जो दिए गए टेक्स्ट और पैटर्न में नोड्स की एक सरणी देता है:

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 स्ट्रिंग और उस पर आपका कितना नियंत्रण है, इस पर निर्भर करते हुए, अपने मार्कअप के अंदर अपने प्रतिक्रिया घटकों के लिए कुछ लक्ष्य बनाने का विचार है,
यदि आप इसे सर्वर की तरफ बदल सकते हैं, तो आप अपने तत्वों को एक आईडी देना चाहेंगे। कुछ इस तरह :
<div id="component_target_1"></div>
और प्रतिक्रिया के अंदर, \id="(component_target_\d)"\g को regexp के साथ देखें, आईडी (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 स्ट्रिंग पर अधिक नियंत्रण नहीं है, तो भी आप उसी दृष्टिकोण का उपयोग कर सकते हैं, आपको कुछ तत्वों को खोजने और स्ट्रिंग में लक्ष्य तत्व को इंजेक्ट करने की आवश्यकता हो सकती है।

बढ़िया सूत्र दोस्तों!

मैंने एक साधारण रिएक्ट टेक्स्ट हाइलाइटर पेन बनाया है जो इस धागे में कुछ विचारों को लागू करता है (कुछ अतिरिक्त जादू के साथ ...), उम्मीद है कि भविष्य के आगंतुक इसे उपयोगी पा सकते हैं।

यहां 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> ); };

इसलिए मुझे इसमें लक्षित मार्कअप खोजने और इसे JSX घटकों में बदलने के लिए html-react-parser के साथ html स्ट्रिंग्स को साफ करने के लिए DOMPurify को लागू करने का एक अच्छा संयोजन मिला - मैं एक उदाहरण के रूप में पारित प्रॉप्स के साथ Rebass का उपयोग करता हूं .. जो काफी अच्छी तरह से सामने आया, दो पैकेज आपको अपने स्वयं के पार्सर को रोल करने के ऊपरी हिस्से से बचने में मदद करेंगे, मैं बिना स्वच्छता के इस पार्सर पैकेज की अनुशंसा नहीं करता। इसके साथ संघर्ष करने वालों के लिए अभी भी इस कोडपेन की गुंजाइश है जो इसके लायक है: https://codesandbox.io/s/eager-wiles-5hpff। किसी भी सुधार पर प्रतिक्रिया की भी बहुत सराहना की जाती है।

अरे जेसी,
यह टेक्स्ट लेने और इसे बदलने के लिए वास्तव में एक अच्छा कॉम्बो जैसा लगता है
प्रतिक्रिया घटक! यह निश्चित रूप से a . के कुछ हिस्सों को बदलने के लिए अच्छा होगा
एक घटक के साथ स्ट्रिंग।

साझा करने के लिए धन्यवाद।

मार्कडाउन को घटकों में बदलने के लिए जैमस्टैक साइट में भी उपयोगी हो सकता है।

सादर,
डेरेक

डेरेक आर। ऑस्टिन, पीटी, डीपीटी, एमएस, बीसीटीएमबी, एलएमटी, सीएससीएस

लिंक्डइन पर मुझसे जुड़ें: https://www.linkedin.com/in/derek-austin/

बुधवार को, 26 फरवरी, 2020, 4:35 अपराह्न जेसी लुईस नोटिफिकेशन @github.com ने लिखा:

इसलिए मुझे HTML को साफ करने के लिए DOMPurify को लागू करने का एक अच्छा संयोजन मिला
इसमें लक्षित मार्कअप खोजने और इसे परिवर्तित करने के लिए html-react-parser के साथ तार
JSX घटकों के लिए - मैं एक उदाहरण के रूप में पारित प्रॉप्स के साथ Rebass का उपयोग करता हूं .. कि
काफी अच्छी तरह से बाहर आया, दो पैकेज आपको ओवरहेड से बचने में मदद करेंगे
अपना खुद का पार्सर रोल करने के लिए, मैं सिर्फ इस पार्सर पैकेज की अनुशंसा नहीं करता
बिना सैनिटाइजेशन के। इससे जूझ रहे लोगों के लिए अभी भी गुंजाइश हो सकती है
यह कोडपेन इसके लायक क्या है:
https://codesandbox.io/s/eager-wiles-5hpff। किसी भी सुधार पर प्रतिक्रिया
बहुत सराहना भी की।

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने टिप्पणी की थी।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/facebook/react/issues/3386?email_source=notifications&email_token=AMV42QTV4FDXZIFXCGB3NZDRE3OATA5CNFSM4A5VRBI2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMWXHJJKTDN ,
या सदस्यता समाप्त करें
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>;

मुझे बताएं कि क्या यह अस्पष्ट है।

यह बहुत अच्छा काम करता है। इसे कोणीय में काम करने का कोई तरीका? मैंने आपके कोड का उपयोग करके इसके बारे में एक प्रश्न पोस्ट किया है:
https://stackoverflow.com/questions/60889171/wrap-certain-words-with-a-component-in-a-contenteditable-div-in-angular

हैलो दोस्तों, मुझे आपकी मदद की ज़रूरत है, मैं रिएक्ट नेटिव का उपयोग कर रहा हूं और मुझे जो करना है वह एक टेक्स्ट से है जिसे मैं डीबी से निकालने के लिए एक प्रारूप (फ़ॉन्ट रंग, लिंक) लागू करने के लिए @ उल्लेख करता हूं , जब खोज में होता है टेक्स्ट में 1 सिंगल मैच प्रतिस्थापन को सभी अच्छा बनाता है, लेकिन! यदि पाठ में कई @उल्लेख हैं, तो यह मुझे एक त्रुटि देता है।

/////पाठ उदाहरण: _हे क्या हुआ @-id:1- सब कुछ ठीक है ??
//// इसके सरणी को सूचीबद्ध करता है, उदाहरण: [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
};

इस तरह कोड केवल मेरे लिए अच्छा काम करता है जब पाठ में केवल एक ही उल्लेख होता है, उदाहरण '_हे क्या हुआ @-आईडी: 1- सब कुछ ठीक है ??_', लेकिन जब एक से अधिक उल्लेख करते हैं तो यह मुझे एक त्रुटि देता है , उदाहरण: '_हे क्या हुआ @-id:1- सब कुछ ठीक है ?? @-id:2- @-id:3-_'... त्रुटि: TypeError: text.split कोई फ़ंक्शन नहीं है और यदि _parts = text.split(usrTofind) रखने के बजाय;_ मैं _parts = text.toString रखता हूं ().split(usrTofind);_ यह मुझे एक [ऑब्जेक्ट ऑब्जेक्ट] त्रुटि देता है

आप स्ट्रिंग को पार्स करने के लिए 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] ?

मैं वास्तव में नहीं जानता कि [ऑब्जेक्ट ऑब्जेक्ट] कौन है? मैं कहता हूं "क्या आप ठीक हैं @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

मैं भी। उन सभी को आजमाया सिर्फ यह पैकेज काम करता है। आपको धन्यवाद!