Question

我尝试创建这样的东西：

如果是HTML格式，请找到{{heart}}文字，然后将其替换为字体真棒。

{{heart}} =＆gt; fa fa-heart

在此代码（下面）中，您可以使用CSS类。

示例：您可以使用以下内容：{{heart red}}

但我不喜欢这样！

我想创建类似规则的内容，以便您只使用{{heart}}，{{star}}，{{apple}}。

如果你试图使用另一个，它就不会工作。

像二维数组的东西：

{{heart}} =＆gt; fa fa-heart，

{{star}} =＆gt; fa fa-star，

等

我有这段代码：

＆＃13;

	$(document).ready(function(){
	document.body.innerHTML = document.body.innerHTML.replace(/\{{([^}]+)}}/g, '<i class="fa fa-$1"></i>');
});

＆＃13;

Answer 1

一种非常简单的方法是使用浏览器本身进行所有解析和匹配。

创建一个不会附加到dom的元素

检查元素是否具有类名，如果没有将其附加到类名

最后返回元素

的outerhtml字符串

下面的代码段

＆＃13;

function class_detector(classnames, html) {
  //chrome you need to place el in parent in order to set html
  var parent = document.createElement("div");
  var el = document.createElement("i");
  parent.appendChild(el);
  el.outerHTML = html;
  for (var x = 0; x < classnames.length; ++x) {
    if (!el.classList.contains("fa-" + classnames[x])) {
      el.classList.add("fa-" + classnames[x])
    }
  }

  return el.outerHTML;;;
}

var output = class_detector(["apple", "pear"], '<i class="fa another-class></i>')
console.log(output);;

＆＃13;

允许替换特定文本

1 个答案: