I have an issue, related to the sanitize-html library, here's my code:
import sanitizeHtml from 'sanitize-html';
const allowedTags = [
'h1',
'h2',
'h3',
'h4',
'h5',
'p',
'a',
'strong',
'i',
'ul',
'ol',
'li',
'em',
'br',
];
export const sanitizeEventDescription = (
description: string,
keepNewline: boolean
) =>
sanitizeHtml(description, {
allowedTags,
transformTags: {
a: function transform(tagName, attribs) {
const href = href
return {
tagName: 'a',
attribs: {
...attribs,
href,
target: '_blank',
rel: 'noopener noreferrer',
},
};
},
},
exclusiveFilter(frame) {
return !frame.text.trim() && frame.tag !== 'br';
},
textFilter(text) {
return text.replace(/(\n|<br>)+/g, '<br>').replace(/<br><br>/g, '<br>');
},
});
When I provide an input string with consecutive \n
characters, the textFilter function replaces them with a single <br>
tag as expected. However, when I provide an input string with consecutive <br>
tags, the textFilter function doesn't seem to collapse them as intended. Instead, I still get multiple <br>
tags in a row in the output.
For example, if I pass in the input string "testing carriage <br><br>returns."
, I still get multiple <br>
tags in a row in the output. However, if I pass in the input string "testing carriage \n\nreturns."
, I get a single <br>
tag in the output.
I've tried adding <br>
to the allowedTags constant and modifying the exclusiveFilter function to include frame.tag !== 'br'
, but this only allows <br>
tags to be outputted and doesn't seem to help with collapsing consecutive <br>
tags.
Can anyone explain why the textFilter function isn't collapsing multiple <br>
tags in a row and how I can modify my code to achieve the desired behavior?
sanitize-html doesn't provide functionality to remove consecutive
tags or \n, so the good option here is to prevent getting the string with consecutive
tags first like this:
import sanitizeHtml from 'sanitize-html';
const allowedTags = [
'h1',
'h2',
'h3',
'h4',
'h5',
'p',
'a',
'strong',
'i',
'ul',
'ol',
'li',
'em',
'br',
];
export const sanitizeEventDescription = (
description: string,
keepNewline: boolean
) =>
sanitizeHtml(description.replace(/(<br\s?\/?>|\n)\s*(<br\s?\/?>|\n)+/gim, '<br>'), {
allowedTags,
transformTags: {
a: function transform(tagName, attribs) {
const href = href
return {
tagName: 'a',
attribs: {
...attribs,
href,
target: '_blank',
rel: 'noopener noreferrer',
},
};
},
},
exclusiveFilter(frame) {
return !frame.text.trim() && frame.tag !== 'br';
},
textFilter(text) {
return text.replace(/(\n|<br>)+/g, '<br>').replace(/<br><br>/g, '<br>');
},
});