获取在HTML字符串中包含Tag的属性

Question

我正在开发一个简单的文本屏幕/终端模拟器(类似于JQuery终端插件,但没有RPC的东西和窗口功能).屏幕的每一行都是一个表格行(HTML字符串),并且打印命令可以插入带有一些属性(例如前景色和背景色)的文本.每个打印的文本都包含带有样式属性的跨度,例如:

<span style="color:#000000;background-color:#111111">A</span><span style="color:#222222;background-color:#333333>BC</span>

这很好用.现在我想添加一个函数,它给出了给定屏幕位置的字符的所有属性,在上面的行中,位置0(A)的字符具有颜色#000000.所以我必须计算不属于span标签的字符,并获得最后的样式.我的第一个容易出错的解决方案是:

function getAttr(line, position) {
    var result = {foreground:'', background:''},
        ch = '', i, j = -1, tag = false;

    // Count characters
    for (i = 0; i < line.length && j < position; i++) {
        ch = line.charAt(i);

        if (ch == '<') {
            tag = true;
        }

        if (ch == '>') {
            tag = false;
        }
        else if (!tag) {
            j++;
        }
    }

    i--;

    // Find styles
    while (i > 0 && line.charAt(i) != '<') {
        if (line.substr(i, 6) == 'color:') {
            result.foreground = line.substr(i + 6, 7); 
        }
        if (line.substr(i, 17) == 'background-color:') {
            result.background = line.substr(i + 17, 7); 
        }
        i--;
    }

    return result;  
}

是否有一个更简单的解决方案,不计算字符(可能是JQuery或正则表达式)？

这类似于 所选文本的Get父元素, 但我不需要选择,只需要一个字符索引.

Answer 1

我将解析 HTML 的任务留给浏览器，只使用生成的 DOM 树。根据使用 DOM 树的思想，您可以使用以下一些伪代码：

function getAttr(lineNumber, position) {
  var lineDom = getDOMContainerForLineNumber(lineNumber);
  var current = 0; // the current character position

  function getAttrRec(elems, foreground, background) {
    for(elem in elems) {
      if(elem is <span>) {
        var res = getAttrRec(elem.children, elem.foregroundColor, elem.backgroundColor);
        if(res != null)
          return res;
      } else if(elem is TEXT) {
        current += elem.textLength;
        if(current >= position)
          return {foreground: foreground, background: background};
      }
    }
    return null;
  }

  return getAttrRec(lineDom.children, black, black);
}

但这只是一个非常粗略的草图。特别是你必须留意空格——浏览器会大量地删除它们。因此，直接依赖文本长度可能不适用于您的情况。此外，您可能想要处理跨度标签不包含前景色或背景色信息的情况。