Jak parsować mały podzbiór Markdown w komponenty React?

Mam bardzo mały podzbiór Markdown wraz z niestandardowym plikiem HTML, który chciałbym przeanalizować w komponentach React. Na przykład chciałbym włączyć następujący ciąg:

hello *asdf* *how* _are_ you !doing! today

Do następującej tablicy:

[ "hello ", <strong>asdf</strong>, " ", <strong>how</strong>, " ", <em>are</em>, " you ", <MyComponent onClick={this.action}>doing</MyComponent>, " today" ]

a następnie zwróć go z funkcji renderowania React (React poprawnie wyrenderuje tablicę jako sformatowany HTML)

Zasadniczo chcę dać użytkownikom możliwość użycia bardzo ograniczonego zestawu Markdown do zamiany tekstu na komponenty w stylu (a w niektórych przypadkach na własne!)

Niebezpiecznie jestSetInnerHTML, i nie chcę wprowadzać zewnętrznej zależności, ponieważ wszystkie są bardzo ciężkie i potrzebuję tylko bardzo podstawowej funkcjonalności.

Obecnie robię coś takiego, ale jest to bardzo kruche i nie działa we wszystkich przypadkach. Zastanawiałem się, czy istnieje lepszy sposób:

function matchStrong(result, i) {
  let match = result[i].match(/(^|[^\\])\*(.*)\*/);
  if (match) { result[i] = <strong key={"ms" + i}>{match[2]}</strong>; }
  return match;
}

function matchItalics(result, i) {
  let match = result[i].match(/(^|[^\\])_(.*)_/); // Ignores \_asdf_ but not _asdf_
  if (match) { result[i] = <em key={"mi" + i}>{match[2]}</em>; }
  return match;
}

function matchCode(result, i) {
  let match = result[i].match(/(^|[^\\])```\n?([\s\S]+)\n?```/);
  if (match) { result[i] = <code key={"mc" + i}>{match[2]}</code>; }
  return match;
}

// Very brittle and inefficient
export function convertMarkdownToComponents(message) {
  let result = message.match(/(\\?([!*_`+-]{1,3})([\s\S]+?)\2)|\s|([^\\!*_`+-]+)/g);

  if (result == null) { return message; }

  for (let i = 0; i < result.length; i++) {
    if (matchCode(result, i)) { continue; }
    if (matchStrong(result, i)) { continue; }
    if (matchItalics(result, i)) { continue; }
  }

  return result;
}

Oto moje poprzednie pytanie, które doprowadziło do tego.

Jak to działa?

Działa poprzez czytanie fragmentu łańcucha po kawałku, co może nie być najlepszym rozwiązaniem dla naprawdę długich łańcuchów.

Ilekroć parser wykryje, że krytyczny fragment jest czytany, tj. '*'Lub jakikolwiek inny znacznik, zaczyna analizować fragmenty tego elementu, aż parser znajdzie znacznik zamykający.

Działa na ciągach wieloliniowych, patrz na przykład kod.

Ostrzeżenia

Nie określiłeś, lub mógłbym źle zrozumieć twoje potrzeby, jeśli istnieje konieczność parsowania tagów pogrubionych i kursywnych , moje obecne rozwiązanie może nie działać w tym przypadku.

Jeśli jednak potrzebujesz pracować z powyższymi warunkami, po prostu skomentuj tutaj, a ja poprawię kod.

Pierwsza aktualizacja: poprawia sposób traktowania znaczników przeceny

Tagi nie są już zakodowane na stałe, ale są mapą, na której można łatwo rozszerzyć w celu dopasowania do swoich potrzeb.

Naprawiono błędy, o których wspomniałeś w komentarzach, dzięki za wskazanie tych problemów = p

Druga aktualizacja: znaczniki przeceny o wielu długościach

Najłatwiejszy sposób na osiągnięcie tego: zastąpienie znaków o wielu długościach rzadko używanym Unicode

Chociaż metoda parseMarkdownnie obsługuje jeszcze tagów o wielu długościach, możemy z łatwością zastąpić te znaczniki o dużej długości prostymi string.replace podczas wysyłania naszego rawMarkdownrekwizytu.

Aby zobaczyć przykład tego w praktyce, spójrz na ReactDOM.render, znajdujący się na końcu kodu.

Nawet jeśli aplikacja nie obsługuje wiele języków, są nieprawidłowe znaki Unicode że JavaScript nadal wykrywa, np .:"\uFFFF" nie jest poprawnym Unicode, jeśli dobrze pamiętam, ale JS nadal będzie mógł je porównać ( "\uFFFF" === "\uFFFF" = true)

Na początku może wydawać się hack-y, ale w zależności od przypadku użycia nie widzę większych problemów z korzystaniem z tej trasy.

Kolejny sposób na osiągnięcie tego

Cóż, możemy łatwo śledzić ostatnie N(gdzieN odpowiada długości najdłuższego tagu o wielu długościach).

Należy wprowadzić pewne poprawki w sposobie, w jaki parseMarkdownzachowuje się metoda wewnątrz pętli , tj. Sprawdzanie, czy bieżący fragment jest częścią znacznika o wielu długościach, jeśli jest on używany jako znacznik; w przeciwnym razie ``kmusielibyśmy to oznaczyć jakonotMultiLength coś podobnego i przesunąć ten fragment jako treść.

Kod

// Instead of creating hardcoded variables, we can make the code more extendable
// by storing all the possible tags we'll work with in a Map. Thus, creating
// more tags will not require additional logic in our code.
const tags = new Map(Object.entries({
  "*": "strong", // bold
  "!": "button", // action
  "_": "em", // emphasis
  "\uFFFF": "pre", // Just use a very unlikely to happen unicode character,
                   // We'll replace our multi-length symbols with that one.
}));
// Might be useful if we need to discover the symbol of a tag
const tagSymbols = new Map();
tags.forEach((v, k) => { tagSymbols.set(v, k ); })

const rawMarkdown = `
  This must be *bold*,

  This also must be *bo_ld*,

  this _entire block must be
  emphasized even if it's comprised of multiple lines_,

  This is an !action! it should be a button,

  \`\`\`
beep, boop, this is code
  \`\`\`

  This is an asterisk\\*
`;

class App extends React.Component {
  parseMarkdown(source) {
    let currentTag = "";
    let currentContent = "";

    const parsedMarkdown = [];

    // We create this variable to track possible escape characters, eg. "\"
    let before = "";

    const pushContent = (
      content,
      tagValue,
      props,
    ) => {
      let children = undefined;

      // There's the need to parse for empty lines
      if (content.indexOf("\n\n") >= 0) {
        let before = "";
        const contentJSX = [];

        let chunk = "";
        for (let i = 0; i < content.length; i++) {
          if (i !== 0) before = content[i - 1];

          chunk += content[i];

          if (before === "\n" && content[i] === "\n") {
            contentJSX.push(chunk);
            contentJSX.push(<br />);
            chunk = "";
          }

          if (chunk !== "" && i === content.length - 1) {
            contentJSX.push(chunk);
          }
        }

        children = contentJSX;
      } else {
        children = [content];
      }
      parsedMarkdown.push(React.createElement(tagValue, props, children))
    };

    for (let i = 0; i < source.length; i++) {
      const chunk = source[i];
      if (i !== 0) {
        before = source[i - 1];
      }

      // Does our current chunk needs to be treated as a escaped char?
      const escaped = before === "\\";

      // Detect if we need to start/finish parsing our tags

      // We are not parsing anything, however, that could change at current
      // chunk
      if (currentTag === "" && escaped === false) {
        // If our tags array has the chunk, this means a markdown tag has
        // just been found. We'll change our current state to reflect this.
        if (tags.has(chunk)) {
          currentTag = tags.get(chunk);

          // We have simple content to push
          if (currentContent !== "") {
            pushContent(currentContent, "span");
          }

          currentContent = "";
        }
      } else if (currentTag !== "" && escaped === false) {
        // We'll look if we can finish parsing our tag
        if (tags.has(chunk)) {
          const symbolValue = tags.get(chunk);

          // Just because the current chunk is a symbol it doesn't mean we
          // can already finish our currentTag.
          //
          // We'll need to see if the symbol's value corresponds to the
          // value of our currentTag. In case it does, we'll finish parsing it.
          if (symbolValue === currentTag) {
            pushContent(
              currentContent,
              currentTag,
              undefined, // you could pass props here
            );

            currentTag = "";
            currentContent = "";
          }
        }
      }

      // Increment our currentContent
      //
      // Ideally, we don't want our rendered markdown to contain any '\'
      // or undesired '*' or '_' or '!'.
      //
      // Users can still escape '*', '_', '!' by prefixing them with '\'
      if (tags.has(chunk) === false || escaped) {
        if (chunk !== "\\" || escaped) {
          currentContent += chunk;
        }
      }

      // In case an erroneous, i.e. unfinished tag, is present and the we've
      // reached the end of our source (rawMarkdown), we want to make sure
      // all our currentContent is pushed as a simple string
      if (currentContent !== "" && i === source.length - 1) {
        pushContent(
          currentContent,
          "span",
          undefined,
        );
      }
    }

    return parsedMarkdown;
  }

  render() {
    return (
      <div className="App">
        <div>{this.parseMarkdown(this.props.rawMarkdown)}</div>
      </div>
    );
  }
}

ReactDOM.render(<App rawMarkdown={rawMarkdown.replace(/```/g, "\uFFFF")} />, document.getElementById('app'));

Link do kodu (TypeScript) https://codepen.io/ludanin/pen/GRgNWPv

Link do kodu (waniliowy / babel) https://codepen.io/ludanin/pen/eYmBvXw

Wygląda na to, że szukasz małego, bardzo podstawowego rozwiązania. Nie takie „super-potwory” jak react-markdown-it:)

Chciałbym polecić Ci https://github.com/developit/snarkdown który wygląda dość lekki i ładny! Tylko 1kb i niezwykle prosty, możesz go użyć i rozszerzyć, jeśli potrzebujesz innych funkcji składni.

Lista obsługiwanych tagów https://github.com/developit/snarkdown/blob/master/src/index.js#L1

Aktualizacja

Zauważyłem, że reagują komponenty, na początku tego nie zauważyłem. To dla ciebie świetne. Uważam, że możesz wziąć bibliotekę jako przykład i zaimplementować niestandardowe wymagane komponenty, aby zrobić to bez niebezpiecznego ustawiania HTML. Biblioteka jest dość mała i przejrzysta. Baw się dobrze! :)

var table = {
  "*":{
    "begin":"<strong>",
    "end":"</strong>"
    },
  "_":{
    "begin":"<em>",
    "end":"</em>"
    },
  "!":{
    "begin":"<MyComponent onClick={this.action}>",
    "end":"</MyComponent>"
    },

  };

var myMarkdown = "hello *asdf* *how* _are_ you !doing! today";
var tagFinder = /(?<item>(?<tag_begin>[*|!|_])(?<content>\w+)(?<tag_end>\k<tag_begin>))/gm;

//Use case 1: direct string replacement
var replaced = myMarkdown.replace(tagFinder, replacer);
function replacer(match, whole, tag_begin, content, tag_end, offset, string) {
  return table[tag_begin]["begin"] + content + table[tag_begin]["end"];
}
alert(replaced);

//Use case 2: React components
var pieces = [];
var lastMatchedPosition = 0;
myMarkdown.replace(tagFinder, breaker);
function breaker(match, whole, tag_begin, content, tag_end, offset, string) {
  var piece;
  if (lastMatchedPosition < offset)
  {
    piece = string.substring(lastMatchedPosition, offset);
    pieces.push("\"" + piece + "\"");
  }
  piece = table[tag_begin]["begin"] + content + table[tag_begin]["end"];
  pieces.push(piece);
  lastMatchedPosition = offset + match.length;

}
alert(pieces);

Wynik:

Wynik testu Regexp

Wyjaśnienie:

/(?<item>(?<tag_begin>[*|!|_])(?<content>\w+)(?<tag_end>\k<tag_begin>))/

• Możesz zdefiniować tagi w tej sekcji: [*|!|_]po dopasowaniu jednego z nich zostanie on przechwycony jako grupa i nazwany „tag_begin”.

• A następnie (?<content>\w+)przechwytuje zawartość zawiniętą przez tag.

• Znacznik końcowy musi być taki sam jak poprzednio dopasowany, więc tutaj używa \k<tag_begin>, a jeśli pomyślnie przejdzie test, przechwyć go jako grupę i nadaj mu nazwę „tag_end”, tak właśnie (?<tag_end>\k<tag_begin>))jest.

W JS utworzyłeś tabelę taką:

var table = {
  "*":{
    "begin":"<strong>",
    "end":"</strong>"
    },
  "_":{
    "begin":"<em>",
    "end":"</em>"
    },
  "!":{
    "begin":"<MyComponent onClick={this.action}>",
    "end":"</MyComponent>"
    },

  };

Użyj tej tabeli, aby zastąpić dopasowane tagi.

Sting.replace ma przeciążenie String.replace (regexp, funkcja) która może przyjmować przechwycone grupy jako parametry, używamy tych przechwyconych elementów do wyszukiwania tabeli i generowania zastępującego łańcucha.

[Aktualizacja] Zaktualizowałem
kod, zachowałem pierwszy, na wypadek, gdyby ktoś nie potrzebował reagować na komponenty i widać, że między nimi jest niewielka różnica.

możesz to zrobić w następujący sposób:

//inside your compoenet

   mapData(myMarkdown){
    return myMarkdown.split(' ').map((w)=>{

        if(w.startsWith('*') && w.endsWith('*') && w.length>=3){
           w=w.substr(1,w.length-2);
           w=<strong>{w}</strong>;
         }else{
             if(w.startsWith('_') && w.endsWith('_') && w.length>=3){
                w=w.substr(1,w.length-2);
                w=<em>{w}</em>;
              }else{
                if(w.startsWith('!') && w.endsWith('!') && w.length>=3){
                w=w.substr(1,w.length-2);
                w=<YourComponent onClick={this.action}>{w}</YourComponent>;
                }
            }
         }
       return w;
    })

}


 render(){
   let content=this.mapData('hello *asdf* *how* _are_ you !doing! today');
    return {content};
  }

A working solution purely using Javascript and ReactJs without dangerouslySetInnerHTML.

Podejście

Wyszukiwanie znak po znaku dla elementów przecenionych. Jak tylko zostanie napotkany, wyszukaj tag końcowy dla tego samego, a następnie przekonwertuj go na HTML.

Tagi obsługiwane we fragmencie

• pogrubienie
• kursywa
• em
• przed

Dane wejściowe i wyjściowe z fragmentu:

JsFiddle: https://jsfiddle.net/sunil12738/wg7emcz1/58/

Kod:

const preTag = "đ"
const map = {
      "*": "b",
      "!": "i",
      "_": "em",
      [preTag]: "pre"
    }

class App extends React.Component {
    constructor(){
      super()
      this.getData = this.getData.bind(this)
    }

    state = {
      data: []
    }
    getData() {
      let str = document.getElementById("ta1").value
      //If any tag contains more than one char, replace it with some char which is less frequently used and use it
      str = str.replace(/```/gi, preTag)
      const tempArr = []
      const tagsArr = Object.keys(map)
      let strIndexOf = 0;
      for (let i = 0; i < str.length; ++i) {
        strIndexOf = tagsArr.indexOf(str[i])
        if (strIndexOf >= 0 && str[i-1] !== "\\") {
          tempArr.push(str.substring(0, i).split("\\").join("").split(preTag).join(""))
          str = str.substr(i + 1);
          i = 0;
          for (let j = 0; j < str.length; ++j) {
            strIndexOf = tagsArr.indexOf(str[j])
            if (strIndexOf >= 0 && str[j-1] !== "\\") {
              const Tag = map[str[j]];
              tempArr.push(<Tag>{str.substring(0, j).split("\\").join("")}</Tag>)
              str = str.substr(j + 1);
              i = 0;
              break
             }
          }
        }
      }
      tempArr.push(str.split("\\").join(""))
      this.setState({
        data: tempArr,
      })
    }
    render() {
      return (
        <div>
          <textarea rows = "10"
            cols = "40"
           id = "ta1"
          /><br/>
          <button onClick={this.getData}>Render it</button><br/> 
          {this.state.data.map(x => x)} 
        </div>
      )
    }
  }

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
  <div id="root"></div>
</body>

Szczegółowe wyjaśnienie (z przykładem):

Załóżmy, że jeśli ciąg znaków to How are *you* doing? Zachowaj mapowanie symboli na tagi

map = {
 "*": "b"
}

• Pętla, aż znajdziesz pierwszy *, przed nim tekst jest normalnym ciągiem
• Wepchnij to do tablicy. Tablica staje się ["How are "]i rozpoczyna wewnętrzną pętlę, aż znajdziesz następną *.
• Now next between * and * needs to be bold, konwertujemy je w elemencie HTML tekstem i bezpośrednio pchamy tablicę, w której Tag = b z mapy. Jeśli tak <Tag>text</Tag>, reaguj wewnętrznie konwertuje na tekst i wypychaj do tablicy. Teraz tablica to [jak się masz , ty ]. Zerwij z wewnętrznej pętli
• Teraz zaczynamy stamtąd zewnętrzną pętlę i nie znaleziono znaczników, więc wciśnij pozostając w tablicy. Tablica staje się: [„How are”, you , „doing”].
• Renderuj w interfejsie użytkownika How are <b>you</b> doing?
Note: <b>you</b> is html and not text

Uwaga : Zagnieżdżanie jest również możliwe. Musimy nazwać powyższą logikę rekurencją

Aby dodać obsługę nowych tagów

• Jeśli są one jednym znakiem, takim jak * lub!, Dodaj je w mapobiekcie z kluczem jako znakiem i wartością jako odpowiednim znacznikiem
• Jeśli są więcej niż jedną postacią, np. `` '', Utwórz mapę jeden do jednego za pomocą rzadziej używanego znaku, a następnie wstaw (Powód: obecnie podejście oparte na wyszukiwaniu znaków po znaku i więcej niż jeden znak ulegnie awarii. Jednak , można to również rozwiązać poprzez poprawę logiki)

Czy obsługuje zagnieżdżanie? Nie
Czy obsługuje wszystkie przypadki użycia wymienione przez OP? tak

Mam nadzieję, że to pomoże.