JS: Получить содержимое тегов без отступов

Question

Всем привет!

У меня есть задача в том, что-бы заключить Markdown содержимое в div, который в последующем обрабатывается отдельно. Проблема в том, что в исходном документе каждый блок форматирован отступами, соответственно содержимое блока я тоже получаю с этими отступами:

<div id="someblock">
      <div id="markdownBlock">
          #Markdown test
          * Test
      </div>
</div>

И при получении содержимого markdownBlock я получаю

              #Markdown test
              * Test

вместо

#Markdown test
* Test

Как можно получить содержимое блока без этих отступов?

Спасибо.

Answer 1

Используем флаг m для регулярки что означает multiline - текст воспринимается как множество строк и позволяет для каждой из них использовать маркеры начала ^ и конца $, далее просто удаляем с начала каждой строки пробельные символы ^\s+

function getContext(){
  console.log(document.getElementById('markdownBlock')
    .textContent.replace(/^\s+/gm, ''))
}

<div id="someblock">
      <div id="markdownBlock">
          #Markdown test
          * Test
      </div>
</div>
<button onclick="getContext()">Получить содержимое</button>

Второй вариант решения

Основан на нахождении и вычитании минимального отступа от левого края (но больше 2х символов - эмпирическая величина) задается в регулярке через {minIndent}, его можно получить и проще — из первой строки, но тут я вычисляю на основе всех строк, таким образом первая строка тоже может иметь отступ:

// можно взять отступ первой строки за базу
function getFirstIndent(str){
  return str.match(/^\s+/).length || 0
} 

// можно найти минимальный из отступов среди всех
function getMinIndent(str){
  const minIndent = 2
  return Math.min(...str.match(/^\s+/gm)
    .filter(e => e.length > minIndent)
    .map(e => e.length))  
} 

function getContext(){
  const str = document.getElementById('markdownBlock').textContent
  const minIndent = getMinIndent(str)
  let rx = new RegExp( '^\\\s{' + minIndent + '}', 'gm')
  console.log(str.replace(rx, ''))
}

<div id="someblock">
  <div id="markdownBlock">
       #Markdown test
      #Markdown test
        * Test
          - abc
  </div>
</div>
<button onclick="getContext()">Получить содержимое</button>

БЛОГ НА HUSL

JS: Получить содержимое тегов без отступов

Ответы (1 шт):