如何使用 <<Hello>> 在 html 上显示字符串，同样的字符串也将传递给 json

Posted 2023-02-15

【中文标题】如何使用 <<Hello>> 在 html 上显示字符串，同样的字符串也将传递给 json

【英文标题】：How to display string on html with <<Hello>> also same string will passed to json

【发布时间】：2022-01-07 21:57:39

【问题描述】：

我想用特殊符号在 html 上设置一些值。我也希望将相同的字符串放入 json 中。但我不会那样做。

this.DTTodaysDateforJson = '<<Hello>>'
console.log("this.DTTodaysDateforJson",this.DTTodaysDateforJson);
//this.DTTodaysDateforJson <<Hello>> This is output for above console.
this.productDiscriptionArrayForID =  `$this.DTTodaysDateforJson <br>&#8810;DV.Product.$this.selectedID&#8811; <br> $this.product.productDescription`
console.log("this.selectedIDwithDiscription-----", this.productDiscriptionArrayForID);
//<<Hello>> getting this in console. But on HTML page it's getting only "<>" this.

对于 this.productDiscriptionArrayForID 和 html 页面，我如何才能在“>。还。 this.productDiscriptionArrayForID 用于将数据传递给 json。 然后使用以下代码将该数据添加到 html 页面。

this.productForm.controls.des.setValue(this.productDiscriptionArrayForID);

我在 angualr11 中这样做

【参考方案1】：

在将字符串注入 HTML 上下文之前，您需要对字符串进行 HTML 编码。

const htmlEncode = (s) => 
    const el = document.createElement("span");
    el.textContent = s;
    return el.innerHTML;
;

this.DTTodaysDateforJson = '<<Hello>>';
console.log("this.DTTodaysDateforJson",this.DTTodaysDateforJson);
this.productDiscriptionArrayForID =  `$htmlEncode(this.DTTodaysDateforJson) <br>&#8810;DV.Product.$htmlEncode(this.selectedID)&#8811; <br> $htmlEncode(this.product.productDescription)`
console.log("this.selectedIDwithDiscription-----", this.productDiscriptionArrayForID);

或者，您可以使用tagged template literals 自动对插入到字符串中的任何内容进行 HTML 编码。例如： AntonioVdlC/html-template-tag: - ES6 Tagged Template for compiling HTML template strings