I have a website with several databases. In each database is a "block of text." On the actual webpage, I've set up repeaters to display my database records and hooked everything up to display dynamically. So far so good.
Next, I've written code to truncate the text using Corvid's "show more" tutorial: https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link
However, when all of this renders on the published site, I can still see the HTML code. After some research, I changed the ".text" to ".html" --example: $w('#text4').text is now $w('#text4').html -- This fixed the main issue, but now, it seems based on the character limit, if the limit "hits" inside of HTML code, the code displays on the rendered site.
I can adjust the character limit, which fixes one text block but displays the HTML of another.
You can see an example of my problem here: https://www.icomatters.ico.edu/in-focus/Fall-2019 -- See how some text blocks display the HTML code "where the text is cut off"?
As far as "how the text is styled," as my research reveals this also matters, I manually set the text styles in the database cells itself. Then, on the actual webpage, I set the dynamic text placeholders to the same styles as what's in the database (p1, p2, etc). So the text styles on the "frontend" and "backend" the same.
On the event you did not click my example site, below is an image of "my problem." Below that is my code for the truncated text (note ".html" and character limit.)
![](https://static.wixstatic.com/media/a27d24_4bcebbefda624fbbaf81a4dd7a752bf0~mv2_d_1400_1732_s_2.jpg/v1/fill/w_147,h_182,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/a27d24_4bcebbefda624fbbaf81a4dd7a752bf0~mv2_d_1400_1732_s_2.jpg)
$w('#dynamicDataset').onReady(() => {
$w('#repeater1').onItemReady(($w, itemData, index) => {
//set the repeater element "text4" to the database fieldKey "story"(use .html instead of text to display "rich text")
$w('#text4').html = itemData.story;
//how many characters to include in the shortned version
const shortTextLength = 470;
//let variable called fullText be the text from the collection
let fullText = $w('#text4').html;
//grab the number of characters defined in shortTextLength and store them in the shortText variable
let shortText = fullText.substr(0, shortTextLength) + '...<b>READ MORE</b>';
//set the contents of the text element to be the short text
$w('#text4').html = shortText;
});
});
Parsing HTML using RegEx is usually a terrible idea. In this case, since it's just text, it may still work for you, however so you might try to find or write some RegEx for your case.
Another option would be to handle rules and exceptions with just JS, like for example:
if (shortText.includes(\<[^>]*>\)) //keep searching the string or w/e