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

Question

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

下面的文字是为了解释我想要达到的目标。当我在Github页面上托管我的网站时，我无法修改markdown解析器。对于那些想知道我如何拥有自己的HTML标记的人，我使用Polymer来创建这些标记。

Markdown Text：

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