简体   繁体   中英

Converting new lines to paragraph/br HTML tags, can this be a single regex?

An app I am working on has the user enter content in plaintext that will later be displayed as HTML. To make the user's content display as nicely as possible, we transform the content as follows:

  • Any blocks of text delimited by two or more new line characters are wrapped in <p> tags. The new line characters (and any whitespace in-between) are stripped out.

  • Any single new line characters (along with surrounding whitespace) are replaced by a <br /> tag.

I'm currently achieving this by putting the the text through two regex replacements but was wondering if it could possibly be consolidated to one. Here's what I have right now (JavaScript):

// content holds the text to process
content = '<p>' + content.replace(/\n([ \t]*\n)+/g, '</p><p>')
                 .replace(/\n/g, '<br />') + '</p>';

There are two different replacement strings. So it's impossible to make it in single replace call.

But second replace() can be changed to more effective plain string substitution.

content = '<p>' + content.replace(/\n([ \t]*\n)+/g, '</p><p>')
                 .replace('\n', '<br />') + '</p>';

So, there's single regexp. :)

Update

Javascript bluffed me. String replace handles only first occurrence.

See How to replace all occurrences of a string in JavaScript?

There are also given several possible workaround implementations of replaceAll .

I was facing a similar requirement - to mimic the wpautop functionality into javascript (for use in the theme customizer).

So here is my approach to the problem:

First, replace the case when there are two line breaks.

to = to.replace(/\n{2}/g, '&nbsp;</p><p>');

Then, replace the case when there are only one line breaks left.

to = to.replace(/\n/g, '&nbsp;<br />');

And lastly wrap the whole content in a <p> tag

to = '<p>' + to + '</p>';

I used the &nbsp; because my styling implied margin after the paragraph. You can omit them if you don't need them. Also, one drawback is that the single line breaks are inserted in the beginning of the next paragraph, but this is something I can live with that.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM