CODEWITHSUNDEEP
javascriptjqueryregex
Daniel Ellison
Daniel Ellison

Reputation: 1349

Jquery - Rendering special characters or replacing text

I have a simple page with data tables. If a user inputs characters such as: < > " ' & , they come out as &lt; &gt; &quot; &#39; &amp;.

I want to implement a jQuery solution to replace the text &lt; &gt; &quot; &#39; &amp; to their proper characters. I have a container table named #reload_me and inside that I have all my data in other sub tables.

I tried the following code as an example but it doesn't seem to work. I get the error TypeError: $(...).replaceText is not a function. What am I doing wrong?

$("#reload_me").replaceText("&amp;", "&" );

Upvotes: 0

Views: 1849

Answers (3)

Daniel Ellison
Daniel Ellison

Reputation: 1349

I ended up fixing my issue by following this guide http://logicflowau.blogspot.ca/2009/08/sharepoint-xslt-data-view-issues_1789.html. This is a Sahrepoint fix rather than a Jquery fix.

Add this function to your DispForm.aspx file:

    <xsl:template name="formatMultiLineText">
    <xsl:param name="text" select="."/>
    <xsl:choose>
    <xsl:when test="contains($text, '&#xa;')">
    <xsl:value-of select="substring-before($text, '&#xa;')" disable-output-escaping="yes"/>
    <br/>
    <xsl:call-template name="formatMultiLineText">
    <xsl:with-param name="text" select="substring-after($text,'&#xa;')"/>
    </xsl:call-template>
    </xsl:when>
    <xsl:otherwise>
    <xsl:value-of select="$text" disable-output-escaping="yes"/>
    </xsl:otherwise>
    </xsl:choose>
    </xsl:template>


Where your multiple line text is displaying, replace this:

    <xsl:value-of select="@Description">


with this:

    <xsl:call-template name="formatMultiLineText">
    <xsl:with-param name="text" select="@Description">
    </xsl:call-template>

Upvotes: 0

jorge polanco
jorge polanco

Reputation: 96

Maybe your problem seem to be with the next quote

Note: If a < div> , < span> , or < noembed> node has a child text node that includes the characters (&), (<), or (>), innerHTML returns these characters as &amp, &lt and &gt respectively. Use element.textContent to get a correct copy of these text nodes' contents.

Source

Upvotes: 0

Zachary Kniebel
Zachary Kniebel

Reputation: 4774

I'm not sure where .replaceText came from, but those values that you are seeing are the ASCII values for the characters. If your characters are currently displaying with their ASCII representations visible, then that means that the text displaying the ASCII values is TEXT and not HTML, since HTML would render the desired representation of the character. As such, replacing the target element's contents using jQuery's .html method should cause the characters to display correctly:

var $reloadMe = $("#reload_me");
$reloadMe.html($reloadMe.text());

Here is the full working sample:

var sample = "data data data &lt; &gt; &quot; &#39; &amp;";

var $td = $("td");
$td.text(sample);

$("#btnFixIt").on("click", function() {
    $td.each(function() {
       var $this = $(this);
       $this.html($this.text());
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
    <tr>
        <th>1st record table</th>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>
<br />
<br />
<table border="1">
    <tr>
        <th>2nd record table</th>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>
<br />
<br />
<table border="1">
    <tr>
        <th>3rd record table</th>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>
<br />
<button type="button" id="btnFixIt">Fix it</button>

Upvotes: 1

Related Questions