Trouble formatting bold/italic/underline text with capture group regex #33

Activity

1. iansinnott commented on May 25, 2018

   

   iansinnott

   on May 25, 2018

   Owner

   More actions

   Hey @CaptainStiggz, yeah this lib does not handle nested replacements. The reason being, it's meant to be roughly equivalent to String.prototype.replace in it's functionality, however, it is true that we run into limitations since replacements can change the data type to something other than strings.

   If you look here you'll see that it only runs replacements on strings. Once your first replacement has been run the element in the result array will be an object (i.e. <b>...</b>) so no replacements will be run on the inner string.

   I'm open to suggestions if you have thoughts about how we might support more robust replacements.

   ---

   To your second point, it just depends on the regex. If you can craft a regex that handles unbalanced/malformed tags then it should work fine. But there's no internal logic here to augment the functionality of the regex.
2. zstiggz commented on May 26, 2018

   

   zstiggz

   on May 26, 2018

   Last edited by zstiggz

   Author

   More actions

   Thanks @iansinnott! I've been fooling around with a recurisive augmentation as follows. It's still pretty rough, but it might be useful. This modification, combined with a slight modification to the regex I originally suggested (/\[i\]([\s\S]+)\[\/i\]/g should be lazy: /\[i\]([\s\S]+?)\[\/i\]/g) seems to work pretty well.

   const reactStringReplaceRecursive = (input, pattern, fn, key=0) => {
   
      const isEmpty = (item) => {
         if(!item) return true
         if(item.hasOwnProperty('props')) {
            return false
         } else {
            return (item.length) ? false : true
         }
      }
   
      if(!input) {
         return null
      } else if(typeof input === "string") {
         return reactStringReplace(input, pattern, fn)
      }
   
      var output = []
      for(var i=0; i<input.length; i++) {
         const item = input[i]
         if(item) {
            if(typeof item === "string") {
               const next = reactStringReplace(item, pattern, fn)
               if(!isEmpty(next)) output.push(next)
            } else if(typeof item === "object") {        
               if(item.hasOwnProperty('props') && item.props.hasOwnProperty('children')) {
                  const next = reactStringReplaceRecursive(item.props.children, pattern, fn, key+1)         
                  if(!isEmpty(next)) {
                     const props = Object.assign({key: "k"+key+"i"+i}, item.props)
                     output.push(React.createElement(
                        item.type,
                        props,
                        next
                     ))
                  }
               } else {
                  const next = reactStringReplaceRecursive(item, pattern, fn, key+1)
                  if(!isEmpty(next)) output.push(next)
               }
            }
         }
      }
   
      return output
   }

   This is a decent start, but still runs into some troublesome edge cases. For example, depending on the ordering of the bold/italic tags, I might end up with something like this:

   const text = "[i][b]this should be bold and italic[/b][/i]"
   // const text = "[b][i]this should be bold and italic[/i][/b]" - this would work
   let replaced = reactStringReplace(text, /\[b\]([\s\S]+?)\[\/b\]/g, (match, i) => {
      return <b key={i}>{match}</b>
   })
   replaced = reactStringReplace(replaced, /\[i\]([\s\S]+?)\[\/i\]/g, (match, i) => {
      return <i key={i}>{match}</i>
   })
   
   // replaced => [
   // "[i]",
   // <b>this should be bold and italic</b>,
   // "[/i]"
   // ]

   The problem gets pretty tricky here. Not exactly sure how I want to handle such cases.

   ❤️React with ❤️2Reacted by Coulston Luteya and Evan Gillogley
3. iansinnott commented on May 27, 2018

   

   iansinnott

   on May 27, 2018

   Owner

   More actions

   You might consider using the React.Children API for the recursion in this case, since it will handle children regardless of whether it's a single element or an array. You would just need to check if the current item being iterated over was a react element.

   That being said, you're use case is essentially a new rich text markup, which might be beyond the scope of simple regex and string replacement. You might consider using a stack to help you track opening/closing brackets and build up a deeply nested data structure representing your markup. Or do something like DraftJS does and annotate each character in the string with metadata which you subsequently use to render the markup. In either case you'll probably end up having to revert to strings and dangerouslySetInnerHTML.

   DraftJS character metadata: https://draftjs.org/docs/api-reference-character-metadata.html

   👍React with 👍1Reacted by fghber