javascript - 如何通过 DOM 为 HTML 代码片段中的字母添加下划线

Question

我正在为我的网络应用构建一个键盘访问库。为了提示应该按下什么键，我想在链接中的键下划线。例如

Orders --- Invoices --- Open Incidents

对于纯文本片段，这很容易(此处使用 jQuery):

part.html(part.html().replace(new RegExp(key, 'i'), '<u>$&</u>'));

但是如果 part 中有任何 html 标记，这会很糟糕.是否有一种优雅的方式来只更新文本节点而不更新标记？

说明:我的用例是数百个嵌套模板在服务器端生成 HTML。目前accesskey属性是手动添加的。导致类似 <a href="angebote.html" accesskey="t"><i class="fa fa-fw fa-podcast"></i>Ange<b>bote</b></a> 的结果.然后，Javascript 前端脚本会添加键绑定(bind)并尝试在绑定(bind)的键下划线。

Answer 1

要仅获取文本节点，并在那里进行替换，您可以使用 tree walker。我还将创建一个函数，用于隔离 span 元素中找到的字母并返回它。然后您可以使用 jQuery(或任何方法)根据需要装饰该元素:

function getLetter(elem, letter){
    if (elem.get) elem = elem.get(0); // remove jQuery wrapper
    var nodes = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, null),
        $node, text, pos, $span;
    letter = letter.toLowerCase();
    while ($node = $(nodes.nextNode())) {
        text = $node.text();
        pos = text.toLowerCase().indexOf(letter);
        if (pos > -1) {
            $span = $('<span>').text(text[pos]);
            $node.replaceWith( // separate the letter from the other text
                text.substr(0, pos),
                $span,
                text.substr(pos+1)
            );
            return $span; // return the element that just has that one letter
        }
    }
}

getLetter($('#orders'), 'o').addClass('underline');
getLetter($('#invoices'), 'i').addClass('underline');
getLetter($('#incidents'), 'n').addClass('underline');

.underline { text-decoration: underline }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Some mix of HTML:</h3>
<div id="orders">
    <span style="color: purple">Order<i>(s)</i></span>
</div>
<div id="invoices">
    <ul><li><b>!!</b>Invoices <i>(urgent)</i></li></ul>
</div>
<div id="incidents">
    <table style="border: 1px solid"><tr><td>Open</td><td>incidents</td></tr></table>
</div>

功能说明

该函数有两个参数:

• elem:包含需要查找的文本的容器元素。此元素可能有也可能没有嵌套的 HTML 标记。
• letter:在该元素中标识的字母:只有该字母的第一次出现才会起作用。

函数返回:

• undefined 当没有匹配时，即提供的字母没有出现在提供的元素包含的任何文本中。
• 函数创建的新 span 元素:它将包含找到的字母。其余文本放在新元素前后的单独文本节点中。