JSON输入意外结束错误：JavaScript打字机效果问题求助

问题根源 #

你的HTML代码中data-type属性存在语法冲突：属性值使用双引号包裹，但数组内部的字符串同样使用双引号，导致HTML解析器提前截断属性值（例如解析到"Dhruv后的双引号时，就判定属性值结束）。最终JavaScript尝试解析不完整的JSON字符串，触发"Unexpected end of JSON input"错误。

修复方案 #

以下两种方式均可解决问题，优先推荐第一种（更符合JSON规范且写法简洁）：

方案1：用单引号包裹属性值，内部字符串保留双引号 #

HTML允许属性值使用单引号，这样内部的双引号不会被解析为属性值的结束标记：

<a class="typewrite color-linear" href="/" data-period="3000" data-type='["Dhruv Verma", "Designer", "Creator"]'></a>

方案2：转义属性值内的双引号 #

如果必须使用双引号包裹属性值，需将内部的双引号转义为HTML实体"：

<a class="typewrite color-linear" href="/" data-period="3000" data-type="[&quot;Dhruv Verma&quot;, &quot;Designer&quot;, &quot;Creator&quot;]"></a>

额外注意 #

确保JavaScript代码中解析data-type值时，使用JSON.parse()处理完整的合法JSON字符串：

const typeElement = document.querySelector('.typewrite');
const typeContent = JSON.parse(typeElement.getAttribute('data-type'));

内容的提问来源于stack exchange，提问作者Dhruv verma