Javascript 如何防止降价将生成的HTML包装到<;p>;元素?

Javascript 如何防止降价将生成的HTML包装到<;p>;元素?,javascript,markdown,Javascript,Markdown,更新:奖励是针对使用“标记”库的解决方案 此降价代码: *foo* 将生成以下HTML代码: <p><em>foo</em></p> foo 现场演示: 但是,我已经将生成的HTML代码注入到内联上下文中,如下所示: <p> text [inject generated HTML here] text </p> 文本[在此处插入生成的HTML]文本 因此,我不希望元素包围生成的HTML代码。我只想将*分隔符转换为

更新:奖励是针对使用“标记”库的解决方案


此降价代码:

*foo*
将生成以下HTML代码:

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

现场演示:

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

<p> text [inject generated HTML here] text </p>
文本[在此处插入生成的HTML]文本

因此,我不希望
元素包围生成的HTML代码。我只想将
*
分隔符转换为
元素,等等


有没有办法告诉降价转换器不要生成
包装器?目前,我正在对生成的HTML字符串执行
.slice(3,-4)
,它确实删除了
标记,但这显然不是我希望长期保留的解决方案。

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

var $text = $(new Showdown.converter().makeHtml( '*foo*' ) );
console.log( $text.html() );

我正在寻找解决这个问题的方法,当我发现这条线索时。我在这里还没有找到任何好的解决方案,所以我写了自己的

var markdown = new Showdown.converter().makeHtml( '*foo*' );
console.log(markdown.replace(/^<p>|<\/p>$/g, ''));
var markdown=new shodown.converter().makeHtml('*foo*');
console.log(markdown.replace(/^|$/g');
如果您遵循,则没有官方方法从标记中删除markdown将生成的不需要的元素,但这并没有真正产生太多的活动,我也从来没有跟进,使之成为现实

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

简单地剥离
标记可能是不够的,因为它相对容易意外地添加
#
字符,最终导致散乱的
h1-6
标记,或者具有
元素中不允许的内联
元素

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

此示例获取标记为
的输出,并生成一个文档片段。然后根据片段中的节点是否为(它们是
元素可能包含的唯一节点)进行过滤。过滤后,返回结果节点,以便在DOM中使用它们

const短语内容=[
“#文本”、“a”、“缩写”、“区域”、“音频”、“b”、“bdi”、“bdo”、“br”、“按钮”,
“canvas”、“cite”、“code”、“data”、“datalist”、“del”、“dfn”、“em”、“embed”,
‘i’、‘iframe’、‘img’、‘input’、‘ins’、‘kbd’、‘keygen’、‘label’、‘map’、‘mark’,
‘数学’、‘米’、‘noscript’、‘对象’、‘输出’、‘图片’、‘进度’、‘q’,
“ruby”、“s”、“samp”、“script”、“select”、“small”、“span”、“strong”、“sub”,
“sup”、“svg”、“template”、“textarea”、“time”、“u”、“var”、“video”、“wbr”
]
函数清理(文本){
const t=document.createElement('模板')
t、 innerHTML=文本
白名单(t.content、phrasingContent)
返回t.content
}
函数白名单(父级、名称){
for(父.childNodes的常量节点){
白名单(节点、名称)
if(!names.includes(node.nodeName.toLowerCase())){
展开(节点)
}
}
}
函数展开(节点){
const parent=node.parentNode
while(node.firstChild){
parent.insertBefore(node.firstChild,node)
}
parent.removeChild(节点)
}
函数为空(节点){
while(node.firstChild){
node.removeChild(node.firstChild)
}
}
const form=document.querySelector('form')
常量输入=document.querySelector('textarea')
const output=document.querySelector('output')
form.addEventListener('submit',e=>{
e、 预防默认值()
空(输出)
output.appendChild(清理(标记为(input.value)))
},false)


*福*

试验
text text

您可以跳过块词法分析部分,改用inlineexer

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

//example
marked.inlineLexer('*foo*', []) // will output '<em>foo</em>'
html=marked.inlineexer(markdown,[],选项);
//范例
marked.inlineexer('*foo*',[])//将输出'foo'

您的外部标签上是否需要任何属性?不能在没有包装器的情况下呈现降价输出吗?否则,只需将其包装在一个普通的
[进一步样式化]中,这样您就不会有任何嵌套问题。如果始终注入
,为什么不从HTML中删除它呢?@ManseUK我正在内联上下文中添加标记生成的HTML,即前后都有文本。此文本不是传递给Markdown的字符串的一部分。@ManseUK我不能这样做,因为这样外部文本将不会与Markdown生成的内容呈现在同一行中。我需要它都在同一条线上。你找到解决这个问题的办法了吗?我正在和Sameth斗争,这是一种创造性的方法。但是,它确实执行解析/序列化过程,并且不能保证生成的HTML字符串与没有
包装的初始字符串是相同的字符串(因为解析/序列化被中继到浏览器,不同的浏览器可能会产生不同的结果)。我仍然更喜欢我的
slice
方法。我已经想出了
.slice(3,-4)
的替代方法。此:
已标记(`${source}`)。匹配(/^(.*)$/)[1]
。这可能看起来有点复杂,但我认为它相当可靠。我可以把它放在一个
inline\u标记的
helper函数中。