Remove DIV tag from Multiline text field using ECMA

Remove DIV tag from Multiline test field using ECMA
Issue:
In my project I need to show the address in a text area from multiline text field while user want to edit the address. But while I was reading the description I see HTML tags in the text as show below. I have implemented this code in ECMA scripting.
Remove DIV tag from Multiline test field using ECMA
Remove DIV tag from Multiline test field using ECMA
Code issue:
I was trying to get the car description as a normal since line of text field. So it is getting all the HTML tags also in it.
Var aboutcar = objListItem.get_item(‘AboutCar’);
Note: The code block was implemented in ECMA scripting.
Solution:



I should remove the div tags from the text with any of below procedures:
-> Apply Regular expression
-> Use jQuery
-> Creating a temporary DOM element
Let us walk through one by one.
Apply Regular expression:
As we know regular expressions help us to replace or remove the test from a string. The below syntax helps us to remove div tag from description.
Var aboutcar = objListItem.get_item(‘AboutCar’).replace(/[^>]+>/g,’’);
In the above code will remove all the HTML tags recursively as I used /g.
Use jQuery:
If you are using jQuery you can use the below code snipped.
Var aboutcar = objListItem.get_item(‘AboutCar’);
Var abtCarVal = $(“<div>”).html(aboutcar).text();
Creating a temporary DOM element:
This approach involves creating a temporary DOM element with the type DIV. The below code sample explains how we can achieve the HTML tag free text from Multiline Text fields.
alert(fnRemoveDIVTag(objListItem.get_item(‘AboutCar’));
Function fnRemoveDIVTag(strDescription)
{
// Create a new div element
 var tmpDivElmnt = document.createElement(“div”);
 // Set the HTML content with the providen
 tmpDivElmnt.innerHTML = strDescription;
// Retrieve the text property of the element (cross-browser support)
return tmpDivElmnt.textContent || tmpDivElmnt.innerText || “”;
}
The output for all the approaches will be:
Remove DIV tag from Multiline test field using ECMA Tutorial
Remove DIV tag from Multiline test field using ECMA Tutorial

Hope this helps happy development in ECMA scripting !!!


You May Also like the Following SharePoint Online Tutorials:

About Krishna Vandanapu

I am Krishna.Vandanapu a SharePoint architect working in IT from last 12 years, I worked in SharePoint 2007, 2010, 2013, 2016 and Office 365. I have extensive hands on experience in customizing SharePoint sites from end to end. Expertise in SharePoint migration tools like Sharegate, Doc Ave and Metalogix. Migrated SharePoint sites from SharePoint 2007 to 2010 and 2010 to 2013 several times seamlessly. Implementing CSOM with Microsoft best practices. Spent quality time in configuring SharePoint application services like User Profile, Search, Managed Meta data services etc. Now exploring SharePoint Framework and SharePoint 2019

View all posts by Krishna Vandanapu →