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 لكنني لا أحب هذه الفكرة. تم تصنيف هذه الطريقة على أنها خطيرة لأسباب وجيهة.

أليست هناك طريقة لتعليم React تحليل jsx داخل سلسلة نصية؟ هل لديك تحليل رد فعل iE

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

وإرجاع هذا بطريقة العرض؟

binarykitchen يمكنك إنشاء عناصر

syranide نعم ، أعرف ذلك بالفعل. نقطتي هي: ألن تكون هذه ميزة JSX / React لطيفة؟ حلل سلسلة وقم بتحويل أي علامات بداخلها إلى مكونات تابعة لـ React.

يمكنك استخدام الدالة split مع regex ثم استبدال الأجزاء الملتقطة ، مثل:

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 ، كتب Ben Alpert [email protected] :

يمكنك استخدام وظيفة التقسيم مع regex ثم استبدال الأجزاء الملتقطة ، مثل:

var parts = "أنا بقرة ؛ الأبقار تقول مو. MOOOOO.". split (/ (\ bmoo + \ b) / gi) ؛
لـ (var i = 1؛ i <parts.length؛ i + = 2) {
أجزاء [i] = ؛}إرجاع

{القطع}

؛
اسمحوا لي أن أعرف إذا كان هذا غير واضح.

-
قم بالرد على هذا البريد الإلكتروني مباشرة أو قم بعرضه على GitHub.

واجهت هذه المشكلة أيضًا عند محاولة تمييز أجزاء من سلسلة برمجية (على سبيل المثال ، استبدل بعلامات <span> ). انتهى بي الأمر بإنشاء وحدة بناءً على حل spicyj أعلاه. لأي شخص مهتم: iansinnott / رد فعل سلسلة استبدال

iansinnott شكرا لتقاسم ذلك. بدأت في استخدامه ثم أدركت أنني سأحتاج إلى واجهة برمجة تطبيقات String.prototype.replace الكاملة (يلزم الوصول إلى مجموعات المطابقة الفردية من أجل 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>

كنت بحاجة إلى شيء من هذا القبيل للإشارة إلى مطابقة بعض الأنماط حتى تتمكن من التفاف قيم متعددة وإجراء بعض التغييرات على حل

/**
 * 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).

فيما يلي مثال على استخدام مع regex:

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 شكرًا على ردك ، في هذه الحالة لدي سلسلة من ترميز html قادمة من محرر wysiwyg لنظام إدارة المحتوى وأود وضع مكونات التفاعل في أماكن معينة داخل هذا الترميز.
هل تعتقد أنه سيكون من الأفضل استخدام مكتبة بدلاً من استخدام البوابات؟ أعتقد أن ما تفعله البوابة هو مجرد عرض المكون داخل عقدة أخرى بدلاً من أقرب عقدة والتي لن تكون أكثر تكلفة من تقديم مكون عادي والخطوة الإضافية الوحيدة هي استبدال السلسلة التي يمكن إجراؤها باستبدال js الأصلي.
هل فاتني شيء؟ هل ستكون هناك مزايا في استخدام المكتبة بدلاً من ذلك؟

rmtngh أود أن أقول أن الأمر يعتمد على ما تحاول القيام به. إذا كنت تحاول فقط رش بعض مكونات React في مناطق مختلفة من شجرة DOM الخاصة بك ، ولم يتم تقديم الشجرة بالفعل باستخدام 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 ، هل يمكنك تقديم عينة من كيفية تحقيقك لإثراء العلامات من خلال التقرير الإبداعي؟ أنا أتطلع لفعل الشيء نفسه.

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 ،
forkingsophiebits الحل هنا:

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

متألق! أجده مفيدًا للغاية نظرًا لأنك تحتاج بالفعل في معظم الأوقات للوصول إلى السلسلة الأصلية

لقد أعدت صياغة حل
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> ); };

لذلك وجدت مزيجًا رائعًا من تطبيق DOM ستساعدك حزمتان على تجنب الحمل الزائد للمحلل اللغوي الخاص بك ، لن أوصي بحزمة المحلل اللغوي هذه بدون التعقيم. بالنسبة لأولئك الذين يكافحون مع هذا ، ربما لا يزال من الممكن تحديد هذا الرمز لما يستحق: https://codesandbox.io/s/eager-wiles-5hpff. ردود الفعل على أي تحسينات موضع تقدير كبير أيضًا.

مرحبًا جيسي ،
يبدو هذا وكأنه مزيج رائع حقًا لأخذ النص وتحويله إلى
تفاعل المكونات! سيكون من الجيد بالتأكيد استبدال أجزاء من ملف
سلسلة مع مكون.

شكرا للمشاركة.

يمكن أن يكون مفيدًا أيضًا في موقع JAMstack لتحويل Markdown إلى مكونات.

مع أطيب التحيات،
ديريك

ديريك ر. أوستن ، PT ، DPT ، MS ، BCTMB ، LMT ، CSCS

انضم إلي على LinkedIn: https://www.linkedin.com/in/derek-austin/

في الأربعاء ، 26 فبراير 2020 ، 4:35 مساءً كتب Jesse Lewis [email protected] :

لذلك وجدت مزيجًا رائعًا من تطبيق DOMPurify لتعقيم html
السلاسل مع html-reaction-parser للعثور على العلامات المستهدفة فيها وتحويلها
لمكونات JSX - أستخدم Rebass مع الدعائم التي تم تمريرها كمثال .. أن
خرج بشكل رائع ، ستساعدك الحزمتان على تجنب النفقات العامة
من تدوير المحلل اللغوي الخاص بك ، لن أوصي بهذه الحزمة المحلل اللغوي
بدون تعقيم. بالنسبة لأولئك الذين يكافحون مع هذا لا يزال من الممكن الخروج
هذا الرمز لما يستحق:
https://codesandbox.io/s/eager-wiles-5hpff. تعليقات على أي تحسينات
أقدر كثيرا جدا.

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/facebook/react/issues/3386؟
أو إلغاء الاشتراك
https://github.com/notifications/unsubscribe-auth/AMV42QXARIOKOYSJ4C5IFQLRE3OATANCNFSM4A5VRBIQ
.

يمكنك استخدام الدالة split مع regex ثم استبدال الأجزاء الملتقطة ، مثل:

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 وما أحتاج إلى فعله هو من نص أقوم باستخراجه من قاعدة البيانات لتطبيق تنسيق (لون الخط ، الرابط) لعمل إشارات @ ، عند البحث إذا كان في يجد النص تطابقًا واحدًا يجعل الاستبدال جيدًا ، ولكن! إذا كان هناك العديد من إشارات @ في النص ،

///// نص مثال: _hey what حدث @ -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
};

بهذه الطريقة ، يعمل الرمز جيدًا بالنسبة لي فقط عندما يكون هناك إشارة واحدة فقط في النص ، على سبيل المثال "_ما الذي حدث @ -id: 1- كل شيء على ما يرام ؟؟ _" ، ولكن عند وضع أكثر من إشارة واحدة ، فإنه يعطيني خطأ ، على سبيل المثال: '_hey what حدث @ -id: 1- كل شيء على ما يرام ؟؟ @ -id: 2- @ -id: 3-_ '... خطأ: خطأ في النوع: 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>

شكرًا sophiebits على الفكرة على split() 🙏

بناءً على حل 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

أنا أيضا. حاولت كل منهم فقط تعمل هذه الحزمة. شكرا لك!