Slightly script excluding html markup

[NitroHazeDev]

Hi,

I have a core button component that gets the label with formatting eg <p>label<p> and possibly other rte formatting. I tried to write a scriptlet to use context variable html and assign it to a variable for use but in vain it still brings up the html tags 

how do I exclude them?

when the <%= btn.label @CONTEXT=‘html’ %> is written it works great but I want to assign to a variable since this will be based on a if else 

thanks 

[arunpatidar]

Hi @NitroHazeDev 
Can you share more info around it? maybe a dialog, where you are editing the text.

I can see core component using span from btn label

https://github.com/adobe/aem-core-wcm-components/blob/8556841a6e3fcdd6cf4cac056c70b6a39761c307/conte... 

[MukeshYadav_]

Hi @NitroHazeDev ,

You may use jsoup in model to remove tags https://www.baeldung.com/java-remove-html-tags#using-jsoup

In sightly we can create variable and use discussed here https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-declare-a-variable-...

Thanks

[EstebanBustamante]

Hi,

I don't fully understand your use case, but if you need to update the button's OOTB markup, is there any reason why you would not extend and update the markup there? You could achieve this with Javascript easily, as well.

[NitroHazeDev]

Team,

I have forms core components and the btn style has changed , it can be a rte so it gets stored with html tags . I want to retrieve it without the html tags 

I tried adding the @CONTEXT variable to it and while it works for a simple script let to exclude the html tags , the context to strip off tags did not work for an assignment statement where I want to assign it to a variable or within an if condition within sightly

[NitroHazeDev]

Tried something like this , pls ignore any ignorant syntax errors

Btn.label.value =“<h1> label</h1>”

since it is a rich text in forms so it is set with say h1 tag and is stored in the backend as such

Now 

in slightly I want to do a test to check if btn.visible then show btn.label.value without <h1> tag so I want the value to be btn.label.value = “label” 

<sly data-custom="${btn.visible?btn.label.value:’none’

@ context='html'}

">  </sly>

variable custom contains “<h1> label</h1>” vs label  

[arunpatidar · Accepted solution]

Hi @NitroHazeDev 
You cannot do that HTL level, you can write a simple JavaScript Use-API to remove the H1 tag and return the label without h1

https://medium.com/@toimrank/aem-javascript-use-api-925fb2a270b 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/passing-a-parameter-using-... 

[EstebanBustamante]

I agree with @arunpatidar , but if this button could come from an RTE where the markup is dynamic, I think the best approach is simply to use vanilla Javascript. 

[rk_pandian]

Hi @NitroHazeDev,

Maybe this will help - I had a similar scenario, where I wanted to remove the p tags from the rte content, so I made use of the <htmlRules> </htmlRules> setting of the RTE field and added something like p="". Similarly you can do something like h1="". Since you say you are using core button component, you might want to overlay it and add the custom html rules to the RTE field.

Few things to note:

• If you use this, you will have to replace each tag with an empty value, so that the value becomes clear of all html tags
• If you are doing this only to overcome a css problem, I would suggest to go with a custom button component with all needed dialog fields

Regards,

Ramkumar

[NitroHazeDev]

All, went ahead with a custom property on it. Works better since one could have any tag , would not be efficient . Plus the label could be anything so worthwhile a property