string inside my javascript is been truncated if it contain '

Question

I have a javascript code which construct an HTML to render inside the browser, here is the javascript part i am asking about:-

if (bodyValue && bodyValue.length >= 150) 
    { 
        var displayUrl = "/Lists/Feedback/DispForm.aspx?ID="+ctx.CurrentItem.ID+"&Source=https://***/Lists/UserFeedbackSystem/AllItems.aspx"

        newBodyValue = bodyValue.substring(0, 150) + "<a target='_blank' href='" + displayUrl + "'>...[Read More]</a>"; 
    } 
return "<span title='" + bodyValue + "'>" + newBodyValue + "</span>";

now if the bodyValue contain this charecter ' then only part of the string will be shown inside the Span title property. for example i have this bodyValue:-

1. Issue started back in 3 weeks and continued recurring until last week.

2. All the resolutions suggest that the issue is with the OS rather than a scanner issue- she's the only user facing this issue.

but the title property which will show the tool-tip will only show this part of the string (till it reaches the '):-

1. Issue started back in 3 weeks and continued recurring until last week.

2. All the resolutions suggest that the issue is with the OS rather than a scanner issue- she

so can anyone advice how i can fix this issue? and what other characters can cause this problem?

EDIT now i have updated my code as follow, to create a <span> and get its outerHTML, as follow:-

function bodyFiledTemplate1(ctx) { 

    var bodyValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 
    var regex = /(<([^>]+)>)/ig; 

    bodyValue = bodyValue.replace(regex, "");
    const span = document.createElement('span');
     span.title = bodyValue;
    span.textContent = bodyValue.slice(0, 150);


    var newBodyValue = bodyValue; 

    if (bodyValue && bodyValue.length >= 150) 
    { 
    var displayUrl = "/Lists/Feedback/DispForm.aspx?ID="+ctx.CurrentItem.ID+"&Source=/Lists/UserFeedbackSystem/AllItems.aspx"
       const a = span.appendChild(document.createElement('a'));
     a.href = displayUrl;
     a.target = '_blank';
     a.textContent  = '...[Read More]';
    } 


    return span.outerHTML;

but if i have the following string 7:28 inside my bodyValue , it will be rendered as 7:28.. i did not test other characters...

Can you post some how that function is being used? Are you about to render the result as HTML? — CertainPerformance, Mar 13 '19 at 23:35
@CertainPerformance i updated my question,,yes u r correct.. the javascript will construct the html to be shown inside the browser.. — John John, Mar 13 '19 at 23:36
Building a string of HTML is not really a great idea, your `'` is matching your quote in your `title='` and closing. A better way is access the DOM element and set it's `innerText` property. — Keith, Mar 13 '19 at 23:38
@Barmar yes, but I also thinking about the `newBodyValue` bit too. :) — Keith, Mar 13 '19 at 23:43
@Keith Quotes aren't a problem there, although `<>` could be. — Barmar, Mar 13 '19 at 23:44
@Barmar Yes, but I was also thinking about the `newBodyValue` bit too.. IOW: It was more an answer on building the accessing the DOM element's directly. I assume you saw me say `yes` in my last comment.. :) — Keith, Mar 13 '19 at 23:45

CertainPerformance · Answer 1 · 2019-03-14T00:10:02.167

2

Rather than dealing with escaping issues, it would probably be a lot more manageable to explicitly assign to the each element's properties directly, rather than to try to concatenate strings together to create HTML markup (which is both inelegant, error-prone, and potentially unsafe). For example, create the span using document.createElement, and assign to its title property:

const span = document.createElement('span');
span.title = bodyValue;
span.textContent = bodyValue.slice(0, 150);
if (bodyValue.length >= 150) {
  const a = span.appendChild(document.createElement('a'));
  a.href = displayUrl;
  a.target = '_blank';
  a.textContent  = '...[Read More]';
}
return span;

Then you can append the returned <span> to whatever container you want to append it to with appendChild (or something similar):

const span = createSpan();
container.appendChild(span);

function createSpan() {
  const bodyValue = `Lorem : ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
 const displayUrl = 'https://example.com/';

  const span = document.createElement('span');
  span.title = bodyValue;
  span.textContent = bodyValue.slice(0, 150);
  if (bodyValue.length >= 150) {
    const a = span.appendChild(document.createElement('a'));
    a.href = displayUrl;
    a.target = '_blank';
    a.textContent  = '...[Read More]';
  }
  return span;
}

const span = createSpan();
document.body.appendChild(span);

edited Mar 14 '19 at 00:10

answered Mar 13 '19 at 23:39

CertainPerformance

356,069
52
309
320

thanks for your help on this.. i tried your code by the result will be shown as `[object HTMLSpanElement]` inside the browser.. can i try to convert the `span` to string.. as i am working on a third party tool, and i am trying to modify the rendering inside the list.. so maybe i need to return a string rather than a DOM element (as i were doing inside my original code)? – John John Mar 13 '19 at 23:52
Did you make sure to use `appendChild` to append the newly created `` like the answer shows? Yes, you *can* concatenate its `innerHTML`, but that's pretty silly to do when you already have the element you want to insert into the DOM. – CertainPerformance Mar 13 '19 at 23:53
as i told you i am building a javascript which should return a string rather than a DOM element. this is how the custom scripts works inside the third party tool if we want to modify the rendering of the list.. now i tried `return span.innerHTML; ` but i will get the text + the link without the parent `span` ..also if the text contain this as part of the string `(09:58 AM)` it will be shown inside the browser as `(09:58 AM)` – John John Mar 13 '19 at 23:59
If you have no choice but to transform the result into a string, then get the created ``'s `outerHTML`: `span.outerHTML`. Putting `:` in the input looks to work just fine, see the live snippet edit – CertainPerformance Mar 14 '19 at 00:09
i know about `outerHTML` but on this link https://stackoverflow.com/questions/1763479/how-to-get-the-html-for-a-dom-element-in-javascript they mentioned that `outerHTML` will only work on IE – John John Mar 14 '19 at 00:27
That's not the case, `outerHTML` has worked for a very long time (at least 5 years I think) on both Chrome and FF – CertainPerformance Mar 14 '19 at 00:28
Did you try using `.outerHTML`? – CertainPerformance Mar 14 '19 at 07:24
yes i tried it... but it did not work. I edited my question to show my latest code and the issue i faced.thnx – John John Mar 14 '19 at 15:30

string inside my javascript is been truncated if it contain '

1 Answers1