Rich Text to Simple Text

Discussion Ask a question
,
1

Hello,

I got a Rich Text field on my database and i am trying to put it in a text area.
But as i tried to do that i was getting the full area on my output text in .rtf format, like this :


I tried this by assigning with .text value as shown below :

$w(“#RepeaterArticles”).onItemReady( ($w, itemData, index) => {
$w(“#TextSmall”).text = itemData.RTFArea;

} );

await wixData.query(“Articles”)
.ge(‘frontPageOrder’,0)
.descending(‘frontPageOrder’,‘_createdDate’)
.limit(3)
.find()
.then( (results) => {
$w(“#RepeaterArticles”).data = results.items;
} );

Then i realized that in order to assign such value i needed to use the .html value of the text field

// ======================== ARTICLES
$w(“#RepeaterArticles”).onItemReady( ($w, itemData, index) => {
$w(“#TextSmall”).html = itemData.RTFArea;
} );
await wixData.query(“Articles”)
.ge(‘frontPageOrder’,0)
.descending(‘frontPageOrder’,‘_createdDate’)
.limit(3)
.find()
.then( (results) => {
$w(“#RepeaterArticles”).data = results.items;
} );

and indeed i got the text on my Text Box area as i wanted it, but… the Fonts and Colors i ve setted on the text box are not “obeyed” by the text which i understant because rtf/htlm has instored formats is self.

So my question is, is there a way to get Rich Text into simple plain text format?

2

Is there a way to get Rich Text into simple plain text format?

Yup! You can use regular expressions and the JavaScript replace function to get rid of the html tags!

Here is an example of how I did it…

//regular expression to remove the script/html  tags
var regex = /(<([^>]+)>)/ig;

//regex to remove the &rsquo; special character with '
var specialRegex = /(&rsquo;)/ig;

//This will replace all tags with an empty string.
let plainText = richText.replace(regex, "");

//this will replace left over &rsquo; with a '
plainText = plainText.replace(specialRegex, "'");

Now we can also do this in less lines of code by combining lines.

//regular expression to remove the script/html  tags 
var regex = /(<([^>]+)>)/ig;  

//regex to remove the &rsquo; special character with ' 
var specialRegex = /(&rsquo;)/ig;  

//This will replace all tags with an empty string and replace &rsquo; with a '
let plainText = richText.replace(regex, "").replace(specialRegex, "'");

We can even do it in one line of code! It just can become difficult to read. The answer above is my preferred way to do it.

let plainText = richText.replace(/(<([^>]+)>)/ig, "").replace(/(&rsquo;)/ig, "'");

Let me know if this helped you!

#regex #regularExpressions

1 Like
3

Dear Patrick, I’m trying out your code for removing html tags now but may I know how I should define richText? I lack programming knowledge, sorry about that HAHA (the console says my richText isn’t defined)

4

whoa ! thank you Patrick!

Worked marvelously!

In fact, I did one line of text to skip the variable creation:

$item('#skuName').text = itemData.description.replace(/(<([^>]+)>)/ig, "").replace(/(&rsquo;)/ig, "'").slice(0,4);
5

Thanks, Patrick! It worked beautifully!
I added a code below to get rid of line breaks.

.replace(/\r?\n/g,"")