How do I format a large amount of text into html automatically?

user_8276973 0
Viewed 4460

I will be publishing a blog in my website. Frequently I will write fairly long entries in a word processor. My site has custom html and css tags -- for example, -div class="blog_post_para"-.

I will dump text into a .txt document (which I save as .html when I'm finished), but adding the tags manually to each paragraph and header will be slow and tedious.

Is there any tool available that can automatically format the paragraphs with "div" tags at the start and /div at the end. The same would be true for paragraph p and /p> tags.

I don't want to use an IDE like Dreamweaver. I just want to format code in a .txt document or a text document saved as .html.

I can output the word processor document to html, but all the styles are inline, and they can't match the custom styles on my site because the word processor doesn't know their names. Default styles won't do -- I have my own custom css classes.

It would also have to replace apostrophes with [amp]#39; and dashes with —

I was going to do it programmatically (in Python), which is probably the most custom solution, but it will take some time.

Is there such a tool?

css html
4 Answers

Since this is ending up on a webpage, why not use JavaScript? A very simple function can turn the plain text into properly formatted tags, or anything else you'd like. For example:

function contentToHtml(text) {
  return text
    .split('\n\n')
    .map(paragraph => `<p>${paragraph}</p>`)
    .join('')
}

This function assumes you hit enter twice when separating paragraphs. It will take in your text and wrap each paragraph in <p> tags.

user_25256330
user_22377380

Another JavaScript solution (click 'ok'):

JsFiddle demo

(function(){

let inp = document.getElementById('input');
let res = document.getElementById('result');
let ok  = document.getElementById('ok');
ok.addEventListener('click', function(){
  let open  = document.getElementById('open').value;
  let close = document.getElementById('close').value;
  let str = inp.value;

  // The main magic is going here:  .replace('something', 'with smth else')
  str = str.replace(/^(.)/gm, open + '$1')  //Match any non-empty (.) new line ^
           .replace(/(.)$/gm, '$1' + close);  // Any non-empty (.) line ending $.

  res.value = str;
});

})();
*{margin: 0;}
#input, #result {
  display: block;
  border: 3px solid orange;
  width: 500px; height: 80px;
  margin: 5px; outline: none;
}
#ok {
  padding: 2px 50px;
  outline: none;
  cursor: pointer;
  margin: 0 5px;
}
#open, #close {
  width: 200px; padding: 3px;
  border: 3px solid orange;
  margin: 5px; outline: none;
}
<input id="open" placeholder="Beginning tag..." value="<div>">
<input id="close" placeholder="End" value="</div>">
<textarea id="input" placeholder="Input Text...">Test
Test

Test</textarea>
<button id="ok">OK</button>
<textarea id="result"></textarea>

To freely modify this example and replace any text parts, you have to know regular expressions. Would be helpful:

regex101.com
regex cheat sheet

user_90053320

Prettydiff is good for big files. It also prettifies the embedded CSS and JavaScript. Here is a bad quality gif showing a 25Mb html file prettified with prettydiff:

enter image description here

Prettier is very good as well. I don't know whether it handles big files.

user_11001070
Related