Question

我需要用链接替换HTML页面上的某些单词，即“链接”这些单词。我有一个标识符描述符数组，如下所示：

  var symbols_desc = [
    {
      id: 'id_one',
      name: 'struct my_struct_one',
    },
    {
      id: 'id_two',
      name: 'my_name_two',
    },
    /* ... */
  ]

因此，在HTML页面的某些区域，我需要将所有struct my_struct_one转换为<a href="#id_one">struct my_struct_one</a>等。

我不是Web领域的专家，因此，我可能使用最愚蠢的方式：我通过jQuery更新HTML。像这样：

$(document).ready(function() {
  $(".some-class1, .some-class2").each(function() {
    var o = $(this);

    symbols_desc.forEach(function(desc){

      o.html(
        o.html().replace(
          new RegExp('(\\b' + desc.name + '\\b)', 'g'),
          '<a class="symb-link" href="#' + desc.id + '">$1</a>'
        )
      );
    });

  });
});

它有效，但速度慢得令人无法接受。大约有70个标识符，HTML页面大约200 KB，大约需要5秒。

鉴于我不时使用的某些Web应用程序的复杂性和令人敬畏，我确信应该有更好的方法来执行这个简单的任务。我很高兴听到你的建议。

Answer 1

在您的情况下，我认为我们所做的就是将舒适forEach更改为简单for并使用更多变量，因此请尝试：

$(".some-class1, .some-class2").each(function() {
    var html = $(this).html();

    for (var i = 0; i < symbols_desc.length; i++) {
        html.replace(
            new RegExp('(\\b' + symbols_desc[i].name + '\\b)', 'g'),
            '<a class="symb-link" href="#' + symbols_desc[i].id + '">$1</a>'
        );
    }

    $(this).html(html);
});

Answer 2

首先，不需要使用jQuery。它可能有助于减缓一切。使用

获取HTML区域

var fooElements = document.querySelectorAll('.someclass1, .someclass2')

这会返回一个nodelist和像object这样的数组，可以使用普通for循环。

另外，你的词典不一定是数组。

var symbols_desc = {
  'id_one' : 'struct my_struct_one',
  'id_two' : 'my_name_two'
}

现在我们可以有一个正则表达式来替换你想要处理的每个html元素中的所有内容，而不是循环n * m次

var fooRegex = new RegExp(Object.keys(symbols_desc).join("|"),"gi");

剩下的就是做实际的工作

for(var i = 0; i < fooElements.length; i++){
  fooElements[i].innerHTML = fooElements[i].innerHTML.replace(fooRegex,function(matchedString){
    return mapObj[matchedString.toLowerCase()];
  });
}

工作示例，它应该非常快：

＆＃13;

var dictionary = {
  'mouse': 'cat',
  'dog': 'mouse',
  'horse': 'dog',
  'cat': 'horse'
}

var fooElements = document.querySelectorAll('.some-class1, .some-class2');

var fooRegex = new RegExp(Object.keys(dictionary).join("|"), "gi");

for (var i = 0; i < fooElements.length; i++) {
  fooElements[i].innerHTML = fooElements[i].innerHTML.replace(fooRegex, function(matchedString) {
    return dictionary[matchedString.toLowerCase()];
  });
}

＆＃13;

<div class="some-class1">
  Dog, cat, mouse
</div>

<div class="some-class2">
  Horse, cat, dog
</div>

＆＃13;

在html页面上转换文本的最佳方法

2 个答案: