javascript - 将文本即时转换为超链接或将它们存储在数据库中？

Question

我在网页上有一个评论部分(类似于SO上的like)，人们可以在其中留下文本，也可以留下链接。它使用标准文本字段工作，该文本字段不允许包含 HTML。没有格式选项等。

因为不允许使用 HTML，所以我需要解析链接(基本上是以 http 或 www 开头的文本)，然后将其包装在 <a> 中。标签。

要在服务器上执行此操作，意味着使用 JSoup 之类的工具来解析文本，然后进行换行，然后将其与其余评论文本一起插入到我的数据库中。

或者，我认为 JQuery 可以扫描页面上的所有评论，并用 <a> 包装以 http 或 www 开头的任何内容。标签。

哪一种是正确/更好/更有效的方法？我有预感，JQuery 方式会导致一些页面变慢，因为它不断动态更新 DOM，但希望得到专家的确认!

Answer 1

当您考虑到您可能在某些时候想要解析 markdown 或用图像等替换表情符号时，考虑性能影响是一个不错的决定。

通常，您有 3 个选择:

1。在后端转换超链接

这里我假设使用 PHP，但原理保持不变:

function renderComment($comment) {
  $commentHtml = transformLinks($comment->comment_text);
  // render $commentHtml
}

这样做的缺点是必须在每个页面请求上替换每个评论的文本，因此不建议这样做。从好的方面来说，与选项 2 相比，您只需存储评论文本一次。

2。在后台转换超链接并存入数据库

假设 PHP 和 MySQL:

CREATE TABLE comments (id ..., comment_text TEXT, comment_html TEXT, ...)
                                                  ^^^^^^^^^^^^
function saveComment($createdOrChangedComment) {
  $comment->comment_html = transformLinks($comment->comment_text);
  saveToDatabase($comment);
}

function renderComment($comment) {
  $commentHtml = $comment->comment_html;
  // render $commentHtml
}

这意味着您必须在数据库中存储评论文本两次，一次作为文本，一次作为 html - 假设您想要某种“编辑”按钮；如果没有，只保存 html 就可以了。
虽然占用更多的数据库空间，但该解决方案仅从数据库中获取预渲染的 HTML，因此性能更好。

3。转换前端的超链接

jQuery(document).ready(function(){
  jQuery('.comment').each(function(commentElement) {
    // Do magic
    transformCommentToHTML(commentElement);
  });
});

当您只有几百条评论时，这应该在性能方面表现良好。 如果有数千条评论同时加载到 DOM(这本身可能会影响性能，但现在让我们忽略它)，解析可能会很明显，因为它是同步发生的并会阻止浏览器。
在这种情况下，您可以一次解析/替换一组注释(例如 300 个)，并在解析之间将控制权返回给浏览器。

3.b 批量转换前端的超链接

jQuery(document).ready(function(){
  var $comments = jQuery('.comment');
  var currentComment = 0;
  (function transformCommentBatch() {
    for (var batchLimit = currentComment + 300; currentComment < $comments.length && currentComment < batchLimit; currentComment++) {
      // Do magic
      transformCommentToHTML($comments[currentComment]);
    }
    if (currentComment < $comments.length) {
      // Don't freeze the browser, continue in the next frame
      setTimeout(transformCommentBatch, 1);
    }
  }());
});

这样，浏览器就可以处理事件，并且不会对用户显得“卡住”，而 DOM 中的前 300 条评论首先会被转换 - 这些评论很可能位于页面顶部，并且是页面上唯一可见的评论负载。