JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<p>[fullwidth blah="1"]
text line lorem ipsuim blah blah
[divider value="80"]
another line with extra space above
[text] this is test[/text]
another line
[/fullwidth]</p>
<h2></h2>
JavaScript
var content = $('p').text();
var content_per_line = content.split(/[\r\n]+/g);
var regex = /^((?!\[).)*$/g;
var output = '';
$.each(content_per_line, function(ind ,line) {
var trimmed_line = $.trim(line);
console.log(trimmed_line)
if (trimmed_line !== '\n' && regex.test(trimmed_line) === true) {
output += '[text]' + line + '[/text]';
} else {
output += line;
}
output += '<br>'
})
console.log(output)
$('h2').html(output)