How to Find and replace both open and close tag with new tags

Question

Hello, Hope you all are safe!!! I have a angular application where I have used syncfusion's rich text editor for client's report with bold, Italic and underline. When I print report, it shows only bold and Italic text. The text with underline formatting does not get printed. So to print Underline text I have to replace their tags with some other tags. So how to do that? This is my input string span style = "font-family: Arial, Helvetica, sans-serif;" > span style = "text-decoration: underline;" > This is the best way span > span > In above string I have to replace span style = "text-decoration: underline;" > with u > tag and its closing tag with tag So I am expecting output string as span style = "font-family: Arial, Helvetica, sans-serif;" > u > This is the best way u > span > But how to find this closing tag . As there are two closing span tag Any help would be appreciated. Thank you

Viswanatha Swamy · Answer

Hello Laxmidhar, He wants the inner tag tobe replaced with . Many thanks.

Laxmidhar Sahoo · Answer

hi You should remove inner span tag itemToEdit.Templatebody = This is the best way

dip s · Answer

@laxmidhar My client side code is in angular (visual code) and server side code asp.net mvc 5. My template.html file is as follows class = "form-group" > Template Body "TemplateBody" name= "TemplateBody" [width]= 'width' [height]= 'height' [(ngModel)]= "itemToEdit.TemplateBody" > My Typescript code template.component.ts import { Component, OnInit } from '@angular/core' ; @Component({ selector: 'app-template' , templateUrl: './template.component.html' , styleUrls: [ './template.component.scss' ], animations: [routerTransition()] }) export class TemplateComponent implements OnInit { itemToEdit = { 'TemplateBody' : '' , 'TemplateFooter' : '' }; } my Templatebody is assigned to ngmodel as shown in html file. Whtever I type in rich text editor (id='TemplateBody') that gets assign to itemToEdit.TemplateBody

Laxmidhar Sahoo · Answer

hi I think itemToEdit.TemplateBody is a template that efine in angular js controller. please can you show me the itemToEdit.TemplateBody template where it is define Thanks and regards

dip s · Answer

div class = "form-group" > label > Template Body label > ejs-richtexteditor id = "TemplateBody" name = "TemplateBody" [width]='width' [height]='height' [(ngModel)]="itemToEdit.TemplateBody" > ejs-richtexteditor > div > @viswanatha Yes. Thanx. this is my html code for rich text box. I will write in this text box and can apply any formatting like bold, italic, underline, font size or font family. itemToEdit.Templatebody will contain string with all formatting tags.Means itemToEdit.Templatebody = span style = "font-family: Arial, Helvetica, sans-serif;" > span style = "text-decoration: underline;" > This is the best way span > span > Now I am saving TemplateBody in DB But before that I have to replace text-decoration tag with and its corresponding closing tag with . But as you can see there are 2 tags. So how i will come to know which tag i need to replace

Viswanatha Swamy · Answer

Hello Dip S, Updated the Code which will work based on the content inside the inner Span dynamically. Many thanks. Regards, Swamy URL: https://github.com/vishipayyallore/learning_angular_in_2020/tree/master/HtmlCss/sample-app1 Code: function changeElementType() { let spanToBeReplaced = document.getElementById( 'spanToBeReplaced' ); var parentSpanElement = document.getElementById( 'spanForChildElement' ); const content = spanToBeReplaced.innerText; parentSpanElement.innerHTML = ` ${content} `; } Images:

Viswanatha Swamy · Answer

Hello Dip S, I will modify the code to dynamically pick the content. Please give me a few minutes I will update the code. Many thanks.

dip s · Answer

@viswanatha thnk you. But My string may contains multiple sentences which are underlined. e.g. This is a testing string . This is written for testing of opening and closing tags . There may be number of sentences in a file . like this. For each underlined word, rich text editor will attach Then in that case how can i proceed?

Laxmidhar Sahoo · Answer

hi If display more code may solve . Thanks

dip s · Answer

Following is the output of rich text editor which i want to save in my database. span style = "font-family: Arial, Helvetica, sans-serif;" > span style = "text-decoration: underline;" > This is the best way span > span > Above is a string "This is the best way" to which i have given some styling like font and underline. now in this output string I have to replace span style = "text-decoration: underline;" > with tag. I can find this tag and replace it. But my main problem is in above string there are two tags. So how will i come to know which tag I need to replace with i.e. the 1st or 2nd one.

Laxmidhar Sahoo · Answer

hi dip Sorry, I am not getting your point, Where you want to find ? Thanks and Regards Laxmidhar sahoo

Viswanatha Swamy · Answer

Hello dip s, Good afternoon. One of the way is, you can get the ElementById() and Replace its inner HTML. I have created a sample and checked into my GitHub Repository. Many thanks. Regards, Swamy URL: https://github.com/vishipayyallore/learning_angular_in_2020/tree/master/HtmlCss/sample-app1