是否可以覆盖现有的 html 标签？

Question

所以，我倾向于用 markdown 编写我的文档，我最近发现我可以在 markdown 中创建缩写。这很好，但我已经创建了自己的缩写标签版本，因为我不喜欢标准标签在呈现时的样子。是否有覆盖现有标签的最佳做法？

下面的文字是为了解释我试图达到的等价目标。我无法修改降价解析器本身，因为我在 Github 页面上托管我的网站。对于那些想知道我如何拥有自己的 HTML 标签的人，我使用 Polymer 创建这些标签。

降价文本：

 Markdown converts text to HTML.

*[HTML]: HyperText Markup Language

转换后的代码：

<p>Markdown converts text to <abbr title="HyperText Markup Language">HTML</abbr>.</p>

我想将其转换为：

<p>Markdown converts text to <short-text abbr="HTML">HyperText Markup Language</short-text>.</p>

Answer 1

如果都是简单的文本，并且您要对所有 abbr 选项卡执行此操作，您只需构建一个新元素并替换旧元素即可。

与jQuery（为简单起见）：

jQuery("abbr").each(function() {
    var title = jQuery(this).attr("title");
    var text = jQuery(this).text();
    var $new = jQuery("<short-text></short-text>").attr("abbr", text).html(title);
    jQuery(this).replaceWith($new);
});

Answer 2

加载页面并解析 Markdown 后，尝试这样的操作（在 ES5 中支持，支持浏览器不需要任何外部工具）：

document.querySelectorAll('abbr').forEach(function(el) {
  var newEl = document.createElement('shortText');
  newEl.setAttribute('abbr', el.innerHTML);
  newEl.innerHTML = el.getAttribute('title');
  el.parentNode.replaceChild(newEl, el);
});

是否可以覆盖现有的 html 标签？

Is it possible to override existing html tags?

html

javascript

markdown

client-side

降价文本：

转换后的代码：

我想将其转换为：