javascript - 我的 javascript 中的字符串如果包含 ' 就会被 chop

Question

我有一个 javascript 代码，它构造了一个 HTML 以在浏览器中呈现，这是我要询问的 javascript 部分:-

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>";

现在如果bodyValue包含此字符 '那么 Span 中将只显示字符串的一部分title属性(property)。 例如我有这个 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.

但是title将显示工具提示的属性将仅显示字符串的这一部分(直到到达 ' ):-

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

有人可以建议我如何解决这个问题吗？还有哪些其他字符会导致此问题？

编辑 现在我已经更新了我的代码如下，创建一个 <span>并获取其 outerHTML ，如下:-

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; 

但是如果我有以下字符串 7:28在我的里面bodyValue ，它将被渲染为 7:28 ..我没有测试其他 Angular 色...

Answer 1

与处理转义问题相比，直接显式分配给每个元素的属性可能更容易管理，而不是尝试将字符串连接在一起以创建 HTML 标记(这既不优雅，又容易出错，并且可能不安全)。例如，创建 span使用document.createElement ，并分配给它的title属性:

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;

然后您可以附加返回的 <span>到您想要将其附加到的任何容器 appendChild (或类似的东西):

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);