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

dip s

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

This is the best wayspan>span>

In above string I have to replace

with

tag

and its closing tag with tag

So I am expecting output string as

This is the best wayu>span>

But how to find this closing tag .

As there are two closing span tag

Any help would be appreciated. Thank you

12 Replies

Know the answer? Post it — somebody with the same question will find it here.

Laxmidhar Sahoo6y ago
hi

You should remove inner span tag
itemToEdit.Templatebody = This is the best way
0
dip s6y ago
@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 Sahoo6y ago

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 s6y ago

<div class="form-group">
<label>Template Bodylabel>
<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 = This is the best wayspan>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 Swamy6y ago

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 Swamy6y ago

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 s6y ago

@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 Sahoo6y ago

If display more code may solve .

Thanks

dip s6y ago

Following is the output of rich text editor which i want to save in my database.

This is the best wayspan>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

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.

Viswanatha Swamy6y ago

Hello Laxmidhar,

He wants the inner tag tobe replaced with . Many thanks.

Laxmidhar Sahoo6y ago

hi dip

Sorry, I am not getting your point, Where you want to find ?

Thanks and Regards

Laxmidhar sahoo

Viswanatha Swamy6y ago

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