10条HTML容易出错的转义符

我查这个资料的原因是,在Excel省略号经过c++转换成了&,解析xml时候报错了,但是写xml里面没有省略号的转义,只有5个:

在 XML 中有 5 个预定义的实体引用:

&lt;<小于
&gt;>大于
&amp;&和号
&apos;'省略号
&quot;"引号

这个10个错误我敢保证肯定有人犯过,不只是初学者,老手因该也有过经历。让我们来看这10个可能会在你的HTML内容中犯的错误。如果你也有一些细节的错误经验,不妨在留言里跟大家一起分享纠正。

Crime 1: 不替换转意符号&

当然这个问题只有你在W3C验证HTML时会报错,有很多朋友会把直接打出来,而不是用&amp;替代。

Crime 2: 省略号知道怎么写吗?

用三点在句子中代表停顿,被称为“省略号”,而不是打三个实心点,它有着自己的HTML转义符&hellip;

Crime 3: 破折号

在HTML中请使用&mdash;来表示破折号,很多朋友会用键盘来打。

Crime 4: 短划线

类似破折号,但其更短一些,语义相同,很多朋友也是使用键盘打出,在HTML中是&ndash;

Crime 5: 版权符号

相信初学者朋友不知道怎么打,很多人会用(C)来表示,其实版权符号是由字母C和圈组成,在HTML中定义为&copy;

Crime 6: 商标符号

版权和商标符号都有自己的HTML形式,所以没必要自己设计样式,在HTML中是&trade;

Crime 7: 数学中的分数

这个我之前也不知道,很少会用到,比如1/2, 1/4 or 3/4在HTML中形式是&frac12;,&frac14;和&frac34;,是不是很简单?

Crime 8: 常用的数学符号

常见的数学符号,如加,减,乘,除都可以用键盘直接打出来,乘号和除号在HTML中转义符是&times;和&divide;

Crime 9: 度的符号

温度,角度或经度/纬度地图位置等,难住了吧?的确我们不太常用的,正确方法是&deg;

Crime 10: 引号的使用

这算是错误率最高的一个转义符号,分为单引和双引。比如2’5′,我说:”XXXXXXX等。其在HTML中因写为&lsquo;和&rsquo;

总结,其实不难发现,这些符号都有规律,他们依据的标准是英文单词一部分缩写,英文好的朋友甚至可以直接推断出其实体。


### 使用 JavaScript 解析 CSS 文本 解析 CSS 文本可以通过多种方式实现,具体取决于需求的复杂程度以及目标环境(浏览器端或 Node.js)。以下是几种常见的方法及其适用场景: #### 方法一:利用内置 DOMParser API 现代浏览器提供了 `DOMParser` 接口,能够轻松解析 HTML 和 XML 数据。虽然它主要用于解析 HTML 或 XML,但在某些情况下也可以间接用于解析 CSS。 通过创建 `&lt;style&gt;` 标签并将 CSS 字符串注入其中,再读取其内容即可完成解析[^1]。 ```javascript function parseCss(cssString) { const parser = new DOMParser(); const doc = parser.parseFromString(`&lt;style&gt;${cssString}&lt;/style&gt;`, &#39;text/html&#39;); const styleElement = doc.querySelector(&#39;style&#39;); if (styleElement.sheet) { return Array.from(styleElement.sheet.cssRules).map(rule =&gt; ({ selectorText: rule.selectorText, cssText: rule.cssText })); } } ``` 此方法适用于简单的样式表解析,但对于复杂的嵌套规则可能表现不佳。 --- #### 方法二:借助第三方库 xiyueta.js 如果需要更强大的功能或者跨平台支持,则可以考虑使用专门设计用来操作 DOM 的工具库&mdash;&mdash;例如提到过的 **xiyueta.js** 库[^2]。该库不仅可以在浏览器环境中运行,在服务端如 Node.js 中同样有效果。 安装并引入 xiuyeta 后,你可以这样处理 CSS 文件: ```javascript const XiuYeta = require(&#39;xiyueta.js&#39;); // 如果是在Node环境下 let documentInstance = new XiuYeta(); documentInstance.write(&#39;&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;style&gt;&#39; + yourCSSContent + &#39;&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;&#39;); let stylesheets = documentInstance.querySelectorAll(&#39;style&#39;); stylesheets.forEach(sheet =&gt; console.log(sheet.innerHTML)); ``` 这种方法的优势在于灵活性高且易于维护;缺点可能是增加了外部依赖项。 --- #### 方法三:手动正则表达式匹配 对于非常基础的需求来说,编写自定义脚本来分析纯文本形式下的 CSS 可能更加轻量级一些。比如下面这个例子展示了如何去掉所有的注释并且分割成单独的选择器与声明块[]^3]^. ```javascript function simpleParse(cssStr){ let regexComments = /\/\*[\s\S]*?\*\//g; let cleanedUp = cssStr.replace(regexComments,&#39;&#39;).trim(); var rulesArray=[]; cleanedUp.split(/}+/).forEach(function(block,i){ if(i===0 &amp;&amp; block.length&lt;=1)return; //skip first empty element var parts=block.match(/^([^{]+)\{([^}]*)/); if(parts!==null){ var obj={}; obj[&#39;selector&#39;]=parts[1].replace(/^\s+|\s+$/gm,&#39;&#39;); var declarations=parts[2]; obj[&#39;declarations&#39;]={};//init decl object inside each rule declarations.split(&#39;;&#39;).forEach(function(decl,j){ if(j==0&amp;&amp;decl.length&lt;2)return; var keyValue=decl.trim().split(&#39;:&#39;); if(keyValue.length&gt;=2){ obj[&#39;declarations&#39;][keyValue[0]]=keyValue.slice(1).join(&quot;:&quot;).trim(); }else{ delete obj[&#39;declarations&#39;]; } }); if(obj.declarations !== undefined ){ rulesArray.push(obj); } }); }; return JSON.stringify(rulesArray,null,4); } console.log(simpleParse(`/* comment */ h1 { color:red ; font-size : large}`) ); ``` 尽管这种方式简单直观,但它缺乏错误恢复机制,并且难以应对复杂的语法结构。 --- ### 转换特定属性名为 JS 兼容版本 针对像 `-webkit-transition` 这样的复合型 CSS 属性名转义到合法的 JavaScript 对象键值对时,通常采用驼峰命名法替代破折号分隔的形式。这一步骤可通过如下函数自动化执行: ```javascript function convertToCamelCase(str) { return str.replace(/-(\w)/g, (_, c) =&gt; c.toUpperCase()); } convertToCamelCase(&#39;-webkit-transition&#39;); // 返回 &quot;WebkitTransition&quot; ``` 上述代码片段会将连字符后的字母大写化从而形成标准驼峰表示法。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值