javascript - innerHTML如何去除缩进
世界只因有你
世界只因有你 2017-06-24 09:43:31
[HTML讨论组]

已解决

各位好:

欲在html中用template标签里面写Markdown,再用jsMarkdown进行处理转换成html,局部dom结构如下:

<p class="content">
  <template type="markdown">
    Welcome
    ====
    My name is Hung
  </template>
</p>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded' ,function (event){
    var $templates = document.querySelectorAll('template[type="markdown"]')
    $templates.forEach(function ($template){
      console.log(marked($template.innerHTML));
    })
  })
</script>

但是因为template标签有缩进,导致了marked把内容当做段落代码处理:

请问又没法办法清除这些缩进,但是又不影响正常缩进的方式,或者不用template标签的其他方式

世界只因有你
世界只因有你

全部回复(2)
黄舟

给你一个思路,统计每一行前面的空白符,得到一个最小值,再按这个最小值清除

补上代码

document.querySelectorAll('template[type="markdown"]').forEach($template => {
  var lines = $template.innerHTML.split(/\r\n|\n/)

  var trimLen = lines.reduce((minLen, line) => {
    var len = (/\S/.exec(line) || {index: 0}).index
    if (len < minLen) { return len }
    return minLen
  }, Infinity)

  if (trimLen > 0) {
    lines = lines.map(line => line.slice(trimLen))
  }

  console.log(marked(lines.join('\n')))
})
仅有的幸福
document.querySelectorAll('template[type="markdown"]').forEach(($template) => {
  let lines = $template.innerHTML.split('\n')
  let linesNum = lines.length
  if (linesNum > 0){
    !!/^\s*$/.test(lines[0]) && lines.shift()
    !!/^\s*$/.test(lines[linesNum-1]) && lines.pop()
  }
  let markdown = lines.map(line => line.substring(Math.min(...lines.map(line => line.match(/^\s*/)[0].length)))).join('\n')
  $template.parentElement.innerHTML = marked(markdown)
})
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号