Wie analysiere ich eine kleine Teilmenge von Markdown in React-Komponenten?

Ich habe eine sehr kleine Teilmenge von Markdown zusammen mit einem benutzerdefinierten HTML-Code, den ich in React-Komponenten analysieren möchte. Zum Beispiel möchte ich diesen folgenden String drehen:

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

In das folgende Array:

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

und geben Sie es dann von einer React-Renderfunktion zurück (React rendert das Array ordnungsgemäß als formatiertes HTML).

Grundsätzlich möchte ich Benutzern die Möglichkeit geben, einen sehr begrenzten Satz von Markdowns zu verwenden, um ihren Text in gestaltete Komponenten umzuwandeln (und in einigen Fällen meine eigenen Komponenten!).

Es ist unklug, gefährlich SetInnerHTML zu verwenden, und ich möchte keine externe Abhängigkeit einbringen, da sie alle sehr schwer sind und ich nur sehr grundlegende Funktionen benötige.

Ich mache gerade so etwas, aber es ist sehr spröde und funktioniert nicht in allen Fällen. Ich habe mich gefragt, ob es einen besseren Weg gibt:

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;
}

Hier ist meine vorherige Frage , die zu dieser geführt hat.

Wie es funktioniert?

Es funktioniert, indem ein String Stück für Stück gelesen wird, was möglicherweise nicht die beste Lösung für wirklich lange Strings ist.

Immer wenn der Parser feststellt, dass ein kritischer Block gelesen wird, d. H. '*' ein anderes Markdown-Tag, beginnt er mit dem Parsen von Blöcken dieses Elements, bis der Parser sein schließendes Tag findet.

Es funktioniert mit mehrzeiligen Zeichenfolgen, siehe zum Beispiel den Code.

Vorsichtsmaßnahmen

Sie haben nichts angegeben, oder ich hätte Ihre Anforderungen falsch verstehen können, wenn die Notwendigkeit besteht, fett und kursiv gedruckte Tags zu analysieren funktioniert meine aktuelle Lösung in diesem Fall möglicherweise nicht.

Wenn Sie jedoch mit den oben genannten Bedingungen arbeiten müssen, kommentieren Sie einfach hier und ich werde den Code optimieren.

Erstes Update: Optimiert die Behandlung von Markdown-Tags

Tags sind nicht mehr fest codiert, sondern eine Karte, die Sie problemlos erweitern können, um sie Ihren Anforderungen anzupassen.

Die Fehler, die Sie in den Kommentaren erwähnt haben, wurden behoben. Vielen Dank, dass Sie auf diese Probleme hingewiesen haben = p

Zweites Update: Markdown-Tags mit mehreren Längen

Der einfachste Weg, dies zu erreichen: Ersetzen von Zeichen mit mehreren Längen durch einen selten verwendeten Unicode

Obwohl die Methode parseMarkdownnoch keine Tags mit mehreren Längen unterstützt, können wir diese Tags mit mehreren Längen string.replace beim Senden unserer rawMarkdownRequisite problemlos durch einfache Tags ersetzen .

Um ein Beispiel dafür in der Praxis zu sehen, schauen Sie sich das an ReactDOM.render, das sich am Ende des Codes befindet.

Auch wenn Ihre Anwendung funktioniert Unterstützung mehrerer Sprachen, gibt es ungültige Unicode - Zeichen , dass JavaScript erkennt noch, ex .: "\uFFFF"kein gültiges Unicode, wenn ich mich richtig erinnere, aber JS noch in der Lage sein , sie zu vergleichen ("\uFFFF" === "\uFFFF" = true )

Auf den ersten Blick mag es hackig erscheinen, aber je nach Anwendungsfall sehe ich bei Verwendung dieser Route keine größeren Probleme.

Ein anderer Weg, dies zu erreichen

Nun, wir könnten leicht den letzten verfolgen N(woN der Länge des längsten Tags mit mehreren Längen entspricht).

Es müssten einige Änderungen am Verhalten der Schleife innerhalb der Methode vorgenommen werden parseMarkdown, dh es wird geprüft, ob der aktuelle Block Teil eines Tags mit mehreren Längen ist, wenn er als Tag verwendet wird. Andernfalls ``kmüssten wir es in Fällen wie markierennotMultiLength oder ähnlichem und diesen Teil als Inhalt verschieben.

Code

// 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 zum Code (TypeScript) https://codepen.io/ludanin/pen/GRgNWPv

Link zum Code (Vanille / Babel) https://codepen.io/ludanin/pen/eYmBvXw

Es sieht so aus, als ob Sie nach einer kleinen, sehr einfachen Lösung suchen. Nicht "Super-Monster" wie react-markdown-it:)

Ich möchte Ihnen https://github.com/developit/snarkdown empfehlen, das ziemlich leicht und schön aussieht! Mit nur 1 KB und extrem einfach können Sie es verwenden und erweitern, wenn Sie andere Syntaxfunktionen benötigen.

Liste der unterstützten Tags https://github.com/developit/snarkdown/blob/master/src/index.js#L1

Aktualisieren

Gerade über Reaktionskomponenten bemerkt, habe es am Anfang verpasst. Ich glaube, das ist großartig für Sie. Nehmen Sie die Bibliothek als Beispiel und implementieren Sie Ihre benutzerdefinierten erforderlichen Komponenten, um dies zu erreichen, ohne HTML gefährlich festzulegen. Die Bibliothek ist ziemlich klein und klar. Viel Spass damit! :) :)

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);

Das Ergebnis:

Regexp-Testergebnis

Erläuterung:

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

• In diesem Abschnitt können Sie Ihre Tags definieren: [*|!|_]Sobald eines davon übereinstimmt, wird es als Gruppe erfasst und als "tag_begin" bezeichnet.

• Und (?<content>\w+)erfasst dann den vom Tag umschlossenen Inhalt.

• Das End-Tag muss mit dem zuvor übereinstimmenden Tag identisch sein. \k<tag_begin>Wenn es den Test bestanden hat, erfassen Sie es als Gruppe und geben Sie ihm den Namen "tag_end" (?<tag_end>\k<tag_begin>)).

In der JS haben Sie eine Tabelle wie folgt eingerichtet:

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

  };

Verwenden Sie diese Tabelle, um die übereinstimmenden Tags zu ersetzen.

Sting.replace hat eine Überladung String.replace (regulärer Ausdruck, Funktion) , die erfasste Gruppen als Parameter verwenden kann. Wir verwenden diese erfassten Elemente, um die Tabelle und die ersetzende Zeichenfolge zu generieren.

[Update]
Ich habe den Code aktualisiert. Ich habe den ersten beibehalten, falls jemand anderes keine Reaktionskomponenten benötigt, und Sie können sehen, dass es kaum einen Unterschied zwischen ihnen gibt.

Sie können es so machen:

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

Ansatz

Zeichenweise Suche nach den Markdown-Elementen. Sobald eines gefunden wird, suchen Sie nach dem Ending-Tag für dasselbe und konvertieren Sie es dann in HTML.

Im Snippet unterstützte Tags

• Fett gedruckt
• Kursivschrift
• em
• Vor

Eingabe und Ausgabe von Snippet:

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

Code:

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>

Detaillierte Erklärung (mit Beispiel):

Angenommen, Zeichenfolge ist How are *you* doing? Behalten Sie eine Zuordnung für Symbole zu Tags bei

map = {
 "*": "b"
}

• Schleife, bis Sie zuerst * finden, Text davor ist normale Zeichenfolge
• Schieben Sie das innere Array. Array wird ["How are "]und startet die innere Schleife, bis Sie das nächste * finden.
• Now next between * and * needs to be boldWir konvertieren sie in ein HTML-Element per Text und schieben das Array mit Tag = b direkt in die Karte. Wenn Sie dies tun <Tag>text</Tag>, reagieren Sie intern in Text konvertieren und in Array verschieben. Jetzt ist Array ["wie geht es", Sie ]. Pause von der inneren Schleife
• Jetzt starten wir die äußere Schleife von dort und es werden keine Tags gefunden. Drücken Sie also, um im Array zu bleiben. Array wird: ["wie geht es", Sie , "tun"].
• Auf der Benutzeroberfläche rendern How are <b>you</b> doing?
Note: <b>you</b> is html and not text

Hinweis : Eine Verschachtelung ist ebenfalls möglich. Wir müssen die obige Logik in Rekursion aufrufen

Unterstützung für das Hinzufügen neuer Tags

• Wenn sie ein Zeichen wie * oder! Sind, fügen Sie sie in ein mapObjekt mit dem Schlüssel als Zeichen und dem Wert als entsprechendes Tag ein
• Wenn es sich um mehr als ein Zeichen handelt, z. B. `` `, erstellen Sie eine Eins-zu-Eins-Zuordnung mit einem weniger häufig verwendeten Zeichen und fügen Sie es dann ein (Grund: Derzeit basiert die Annäherung an die Suche nach Zeichen nach Zeichen, sodass mehr als ein Zeichen unterbrochen wird , das kann auch durch Verbesserung der Logik behoben werden)

Unterstützt es das Verschachteln? Nein
Unterstützt es alle von OP genannten Anwendungsfälle? Ja

Ich hoffe es hilft.