Oqtane Tutorials
Oqtane Tutorials

RazorBlade Tutorials

Tutorial Home › RazorBlade
RazorBlade Text Operations
#3 Scrub HTML Strings (Remove HTML Tags)
RazorBlade  Basic Html5  Tag  API Introduction  v3.0
Requirements
Resources

Scrub HTML Strings (Remove HTML Tags)

These demos show how to strip all html from a string. You often need this in combination with crop or ellipsis to create teasers.

About the Scrub Service

This tutorial inherits from the Custom.Hybrid.Razor14 or the Custom.Hybrid.RazorTyped base class.

This allows us to use Kit.Scrub to access an IScrub without having to use GetService<IScrub>.

RazorBlade IScrub.All(...), IScrub.Only(), IScrub.Except()

⬇️ Result | Source ➡️

Original

<h1>Introduction</h1><p>Welcome to this blog post</p><hr><p>beginning with xyz we'll tell you more</p>
which if cropped at 50 would be really messy
<h1>Introduction</h1><p>Welcome to this blog post< 
@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade

@{
  var val1 = "<h1>Introduction</h1><p>Welcome to this blog post</p><hr><p>beginning with xyz we'll tell you more</p>";
  var cropLen = 50;
}

<h4>Original</h4>
<code>@val1</code>
<div>which if cropped at @cropLen would be really messy</div>
<code>@val1.Substring(0, cropLen)</code>

⬇️ Result | Source ➡️

Introduction Welcome to this blog post beginning with xyz we'll tell you more 
@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade

@{
  var val1 = "<h1>Introduction</h1><p>Welcome to this blog post</p><hr><p>beginning with xyz we'll tell you more</p>";
}
<code>@Kit.Scrub.All(val1)</code>

⬇️ Result | Source ➡️

Introduction Welcome to this blog post beginning… 
@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade

@{
  var val1 = "<h1>Introduction</h1><p>Welcome to this blog post</p><hr><p>beginning with xyz we'll tell you more</p>";
  var cropLen = 50;
}
<code>@Html.Raw(Text.Ellipsis(Kit.Scrub.All(val1), cropLen))</code>

Only scrub specified tags using IScrub.Only(source, tag)

⬇️ Result | Source ➡️

Scrub one tag: <h2><span>The cool title</span></h2>
Scrub multiple tags: <span>The cool title</span> 
@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade

@{
  var exampleTagsOnly = "<div><h2><span>The cool title</span></h2></div>"; 
}
<div>
  <strong>Scrub one tag: </strong>
  <code>@Kit.Scrub.Only(exampleTagsOnly, "div")</code>
</div>
<div>
  <strong>Scrub multiple tags: </strong>
  <code>@Kit.Scrub.Only(exampleTagsOnly, new string[] 
    { "div", "h2" })
  </code>
</div>

Scrub except the specified tags using IScrub.Except(source, tag)

⬇️ Result | Source ➡️

Scrub tags except one tag: <h2>The cool title</h2>
Scrub tags except multiple tags: <div><span>The cool title</span></div> 
@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade

@{
  var exampleTagsExcept = "<div><h2><span>The cool title</span></h2></div>"; 
}
<div>
  <strong>Scrub tags except one tag: </strong>
  <code>@Kit.Scrub.Except(exampleTagsExcept, "h2")</code>
</div>
<div>
  <strong>Scrub tags except multiple tags: </strong>
  <code>@Kit.Scrub.Except(exampleTagsExcept, new string[] 
    { "div", "span" })
  </code>
</div>

RazorBlade IScrub.Attributes(...), IScrub.Styles(), IScrub.Classes()

These demos show how to scrub attributes of html source.

Using IScrub.Classes(source) you can scrub all classes.

⬇️ Result | Source ➡️

Scrub all classes from source: <div ><strong >No</strong> classes allowed</div> 
@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade

@{
  var exampleClasses = "<div class='remove-me not-allowed'><strong class='not-allowed'>No</strong> classes allowed</div>";
}
<div>
  <strong>Scrub all classes from source: </strong>
  <code>@Kit.Scrub.Classes(exampleClasses)</code>
</div>

Using IScrub.Attributes(source, attributes) you can scrub attributes.

⬇️ Result | Source ➡️

Scrub all attributes from source: <div>No attributes allowed</div>
Scrub one attribute from source: <div not-allowed class='removed'>No attributes allowed</div>
Scrub some attributes from source: <div class='removed'>No attributes allowed</div> 
@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade

@{
    var exampleAttributes = "<div remove-me not-allowed class='removed'>No attributes allowed</div>";
  }
<div>
  <strong>Scrub all attributes from source: </strong>
  <code>@Kit.Scrub.Attributes(exampleAttributes)</code>
</div>
<div>
  <strong>Scrub one attribute from source: </strong>
  <code>@Kit.Scrub.Attributes(exampleAttributes, "remove-me")</code>
</div>
<div>
  <strong>Scrub some attributes from source: </strong>
  <code>@Kit.Scrub.Attributes(exampleAttributes, new string[] 
    { "remove-me", "not-allowed" })
  </code>
</div>

Using IScrub.Styles(source) you can scrub all styles.

⬇️ Result | Source ➡️

Scrub all styles from source: <div >No styles allowed</div> 
@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade

@{
  var exampleStyle = "<div style='background-color: red; width: 50px; height: 50px;'>No styles allowed</div>";
}
<div>
  <strong>Scrub all styles from source: </strong>
  <code>@Kit.Scrub.Styles(exampleStyle)</code>
</div>

 

 

RazorBlade Text Operations
#3 Scrub HTML Strings (Remove HTML Tags)
RazorBlade  Basic Html5  Tag  API Introduction  v3.0