How transform a string with a particular identifier?

Question

Input: 'text __city__ text __city__ text __city__'

Output: 'text <i>city</i> text <i>city</i> text <i>city</i>'

The result of the feature is passed into dangerouslySetInnerHTML.

This component is

<div dangerouslySetInnerHTML={{__html: content.replace(/(?:\r\n|\r|\n)/g, '<br />')}}></div>

for this problem (link).

My function is

const transformText = (text) => {
  const tmp = text.split('__');
  var res = '';
  var check = true;
  for (var i = 0; i < tmp.length-1; i++){
    check = !check;
    if (check) {
      res += '<i>'+tmp[i]+'</i>';
    } else if (tmp[i] != undefined){
      res += tmp[i];
    }
  }
  return res;
};

but breaks the rest of the page into IE11 browser.

First of all, if your raw input is not HTML, turning it into HTML and then use `dangerouslySetInnerHTML` is a terrible idea. When transforming your input, your first goal should be to parse it into an array or hash of text/city pairs. Once that is done, you would only need to iterate over that array and render each pair accordingly, using `
It's not a list, it was just an example. From the API I get a string. — GiGa, Nov 27 '17 at 12:22
Well, I'm sorry, but I can only comment on the code you provide. And in that particular case, your approach is terribly wrong, as I outlined in my previous comment. — Thomas Hennes, Nov 27 '17 at 12:24

score 1 · Answer 1 · answered Nov 27 '17 at 12:50

1

Step 1: transforming the input text.

Assuming the input is in the form "text __city__ text __city__ ... text __city__" as per your example.

const input = "text1 __paris__ text2 __london__ text3 __berlin__";
// the following will turn the input into an array of the form
// [ [text, city], [text, city], ... [text, city] ]
const pairs = input.slice(0, -2).split('__ ').map(pair => pair.split(' __'));

Step 2: using the array in a React component.

Assuming the variable pairs holds the text/city pairs as defined above, the following would be the render method inside your component (if it is class-based).

render() {
  return (
    <ul>
      {pairs.map((pair, index) => {
        return <li key={index}>{pair[0]} <i>{pair[1]}</i></li>;
      })}
    </ul>
  );
}

answered Nov 27 '17 at 12:50

Thomas Hennes

9,023
3
27
36

The string can also be '__city__ text __city__'. They are not pairs of values. – GiGa Nov 27 '17 at 14:11
Resolved const tmp = quote.title.split('__'); {tmp.map((e, key) => (key%2 == 1 ? {e} : e))} – GiGa Nov 27 '17 at 15:41
@GiGa Again, I could only rely on the example you provided to determine the format of your input. If it is different, you can easily adapt the solution to fit different input formats (as you did in your previous comment). What really matters here is the general approach, and as you can see, this is much better (and much more React-like) than your original inclination to manipulate and operate directly on a single string. – Thomas Hennes Nov 27 '17 at 16:27
The approach is definitely better. Thanks Jaxx – GiGa Nov 27 '17 at 22:47

How transform a string with a particular identifier?

1 Answers1