18

更新：赏金是使用“标记”库的解决方案。

此降价代码：

*foo*

将生成此 HTML 代码：

<p><em>foo</em></p>

现场演示： https ://jsbin.com/luganot/edit?js,console

但是，我已经将生成的 HTML 代码注入到内联上下文中，如下所示：

<p> text [inject generated HTML here] text </p>

所以我不希望<p>元素环绕生成的 HTML 代码。我只想将*分隔符转换为<em>, 元素等。

有没有办法告诉 Markdown 转换器不生成<p>包装器？目前，我正在.slice(3,-4)对生成的 HTML 字符串进行处理，它确实删除了<p>, 和</p>标签，但这显然不是我想长期保留的解决方案。

4

4 回答 4

7

您可以跳过块词法分析部分并改用 inlineLexer。

html = marked.inlineLexer(markdown, [], options);

//example
marked.inlineLexer('*foo*', []) // will output '<em>foo</em>'
于 2017-08-20T04:35:10.110 回答
3

使用 jQuery 会是一种选择吗？这将在以下情况下起作用：

var $text = $(new Showdown.converter().makeHtml( '*foo*' ) );
console.log( $text.html() );
于 2012-12-10T15:30:33.317 回答
3

当我找到这个 SO 线程时，我也在寻找解决方案。我还没有在这里找到任何好的解决方案，所以我自己写了。

var markdown = new Showdown.converter().makeHtml( '*foo*' );
console.log(markdown.replace(/^<p>|<\/p>$/g, ''));
于 2015-02-18T12:34:33.567 回答
0

如果您遵循commonmark 标准，则没有官方方法可以从 markdown 否则会生成的标记中删除不需要的元素。2014 年，我询问了内联模式的可能性，但这并没有真正产生太多的活动，我也从未跟进它以使其成为现实。

话虽如此，我所知道的清理降价的最简单解决方案是通过白名单运行它作为后处理步骤。

仅仅剥离<p>标签可能是不够的，因为它相对容易意外添加#字符并最终得到杂散h1-6标签，或者具有<div>元素中不允许的内联<p>元素。

只要您在浏览器上下文中或使用类似的 DOM API，白名单在 JS 中非常简单。

此示例获取输出marked并生成文档片段。然后根据片段中的节点是否在表达内容（这是<p>元素可能包含的唯一节点）过滤片段中的节点。过滤后，返回结果节点，以便它们可以在 DOM 中使用。

const phrasingContent = [
  '#text', 'a', 'abbr', 'area', 'audio', 'b', 'bdi', 'bdo', 'br', 'button',
  'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed',
  'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'map', 'mark',
  'math', 'meter', 'noscript', 'object', 'output', 'picture', 'progress', 'q',
  'ruby', 's', 'samp', 'script', 'select', 'small', 'span', 'strong', 'sub',
  'sup', 'svg', 'template', 'textarea', 'time', 'u', 'var', 'video', 'wbr'
]

function sanitize(text) {
  const t = document.createElement('template')
  t.innerHTML = text
  whitelist(t.content, phrasingContent)
  return t.content
}

function whitelist(parent, names) {
  for (const node of parent.childNodes) {
    whitelist(node, names)
  
    if (!names.includes(node.nodeName.toLowerCase())) {
      unwrap(node)
    }
  }
}

function unwrap(node) {
  const parent = node.parentNode
  while (node.firstChild) {
    parent.insertBefore(node.firstChild, node)
  }
  parent.removeChild(node)
}

function empty(node) {
  while (node.firstChild) {
    node.removeChild(node.firstChild)
  }
}

const form = document.querySelector('form')
const input = document.querySelector('textarea')
const output = document.querySelector('output')

form.addEventListener('submit', e => {
  e.preventDefault()
  
  empty(output)
  
  output.appendChild(sanitize(marked(input.value)))
}, false)
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<form>
  <p>
    <textarea name="input" cols="30" rows="10">*foo*</textarea>
  </p>
  <button type="submit">Test</button>
</form>

<p> text <output></output> text </p>

当然，所有这些都假设一个浏览器环境，并且可以在通过marked库处理输入之后处理白名单。

于 2017-08-20T04:21:27.633 回答