1. Top
  2. slack-message-parser
  3. Files
  4. index.html
slack-message-parser

JavaScript library for parsing Slack message format (mrkdwn)

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111 

    <!DOCTYPE html>
    <html lang="en-US">
      <head>
        <meta charset="utf-8" />
        <meta http-equiv="Content-Security-Policy" content="default-src 'self';frame-src https://codesandbox.io;style-src https://pocka.github.io/slack-message-parser/styles.css https://rsms.me/inter/ https://cdn.jsdelivr.net/npm/hack-font@3.3.0/;font-src https://rsms.me/inter/ https://cdn.jsdelivr.net/npm/hack-font@3.3.0/" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="https://rsms.me/inter/inter.css" rel="stylesheet" /><link href="https://cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css" rel="stylesheet" />
<title>Introduction | slack-message-parser</title>
        <link rel="stylesheet" href="/slack-message-parser/styles.css" />
      </head>
      <!--
        This site is generated using nano-jsx SSR, lightning-css, remark/rehype, Prism, and Deno.
        Source code at https://github.com/pocka/slack-message-parser/tree/master/docs/site/
      -->
      <body>
        <div class="layout__logo-wrapper  layout__header"><a class="layout__logo" href="/slack-message-parser/">slack<br />message<br />parser</a></div><nav class="layout__nav  layout__header"><ul class="nav__list"><li><a class="nav__link" href="/slack-message-parser/">Intro</a></li><li><a class="nav__link" href="/slack-message-parser/installation/">Install</a></li><li><a class="nav__link" href="/slack-message-parser/api/">API</a></li><li><a class="nav__link" href="/slack-message-parser/examples/">Examples</a></li><li><a class="nav__link" href="https://github.com/pocka/slack-message-parser">GitHub</a></li></ul></nav><div class="layout__header-fill  layout__header"></div><aside class="layout__toc"><div class="toc__root"><nav class="toc"><ol class="toc-level toc-level-1"><li class="toc-item toc-item-h1"><a class="toc-link toc-link-h1" href="#introduction">Introduction</a><ol class="toc-level toc-level-2"><li class="toc-item toc-item-h2"><a class="toc-link toc-link-h2" href="#important-note">Important note</a></li><li class="toc-item toc-item-h2"><a class="toc-link toc-link-h2" href="#quick-glance">Quick glance</a></li><li class="toc-item toc-item-h2"><a class="toc-link toc-link-h2" href="#available-syntax">Available Syntax</a></li></ol></li></ol></nav></div></aside><main class="layout__main"><div class="markdown__root"><h1 id="introduction">Introduction</h1>
<p>slack-message-parser is a JavaScript library to parse a message returned by Slack API then give you an AST-like tree object.
You can use the result tree to create a message viewer (HTML, React component, etc...) or whatever you want.</p>
<h2 id="important-note">Important note</h2>
<p>There are some cases it's impossible to correctly parse a message composed by <a href="https://api.slack.com/changelog/2019-09-what-they-see-is-what-you-get-and-more-and-less">Slack's WYSIWYG message editor</a>, especially when an inline code block is involved (see <a href="https://github.com/pocka/slack-message-parser/issues/26">#26</a>).
Please consider traversing Blocks (<code>blocks</code> property) first.
This library is suitable for fallback purpose or for when Blocks are not available.</p>
<h2 id="quick-glance">Quick glance</h2>
<pre class="language-ts"><code class="language-ts"><span class="token keyword module">import</span> <span class="token imports">slackMessageParser</span> <span class="token keyword module">from</span> <span class="token string">"slack-message-parser"</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> tree <span class="token operator">=</span> <span class="token function">slackMessageParser</span><span class="token punctuation">(</span><span class="token string">"Slack *message* ~to~ _parse_"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">dir</span><span class="token punctuation">(</span>tree<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<details>
  <summary>Output</summary>
<pre class="language-js"><code class="language-js"><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token maybe-class-name">NodeType</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Root</span></span><span class="token punctuation">,</span>
  <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token maybe-class-name">NodeType</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Text</span></span><span class="token punctuation">,</span>
      <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"Slack "</span><span class="token punctuation">,</span>
      <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">"Slack "</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token maybe-class-name">NodeType</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Bold</span></span><span class="token punctuation">,</span>
      <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token maybe-class-name">NodeType</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Text</span></span><span class="token punctuation">,</span>
          <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"message"</span><span class="token punctuation">,</span>
          <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">"message"</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">"*message*"</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token maybe-class-name">NodeType</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Text</span></span><span class="token punctuation">,</span>
      <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">" "</span><span class="token punctuation">,</span>
      <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">" "</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token maybe-class-name">NodeType</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Strike</span></span><span class="token punctuation">,</span>
      <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token maybe-class-name">NodeType</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Text</span></span><span class="token punctuation">,</span>
          <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"to"</span><span class="token punctuation">,</span>
          <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">"to"</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">"~to~"</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token maybe-class-name">NodeType</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Text</span></span><span class="token punctuation">,</span>
      <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">" "</span><span class="token punctuation">,</span>
      <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">" "</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token maybe-class-name">NodeType</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Italic</span></span><span class="token punctuation">,</span>
      <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token maybe-class-name">NodeType</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Text</span></span><span class="token punctuation">,</span>
          <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"parse"</span><span class="token punctuation">,</span>
          <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">"parse"</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">"_parse_"</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">"Slack *message* ~to~ _parse_"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</details>
<h2 id="available-syntax">Available Syntax</h2>
<ul>
<li>Plain text</li>
<li>Links
<ul>
<li>Channels (<code>#channel</code>)</li>
<li>User (<code>@someone</code>)</li>
<li>URL (<code>https://foo.bar</code>, <code>mailto:foo@bar</code>)</li>
<li>Commands (Represented as <code>&#x3C;!foo></code>, more details <a href="https://api.slack.com/docs/message-formatting">here</a>)</li>
</ul>
</li>
<li>Emojis 😍</li>
<li>Code block</li>
<li>Inline code (<code>`foo`</code>)</li>
<li>Italic (<code>_foo_</code>)</li>
<li>Bold (<code>*foo*</code>)</li>
<li>Strikethrough (<code>~foo~</code>)</li>
<li>Quotes (<code>> foo</code>)</li>
</ul></div></main>
        
      </body>
    </html>