Question

我想知道是否有一种方法可以使用Javascript或jQuery在HTML中找到字母的位置？我非常怀疑这是可能的，但它会让我的生活变得如此简单。

或者，有没有办法使用JS在HTML中找到<br />标签的位置？

提前致谢。

Answer 1

正如tdammers所提到的那样，处理所有细节来整理一个处理你所建议的过程的细节有许多细微差别可能需要解决，这取决于你正在做什么。

您要做的事情的基础是：

在要找到位置的文本周围换行元素，例如，在文本的情况下，可能是<span>。
获取您添加的元素的$.offset()或$.position()。无论你选择哪一个与你想要做的事情相关;第一个与document相关，第二个与包含元素相关。

我创建了一个脚本的简单演示，使用带有div和position: absolute / top偏移的left来“突出显示”在几个段落中键入文本框的字词相对于段落中找到的术语（由它们周围的<span>定位）。

注意，这只是一个演示（$.offset()）;它不是生产就绪的代码。在代码片段下面有一个实时小提琴演示的链接。

首先，我创建了一个函数来查找并为找到的每个术语创建一个突出显示<div>。

function highlightWordPositions(word) {
    var $paras = $('p'),
        $spans,
        _top = 0,
        _left = 0;

    $paras.each(function(){
        var $p = $(this),
            regex = new RegExp(word, 'g');

        $p.html($p.text().replace(regex, '<span>' + word + '</span>'));
        $spans = $p.find('span');

        $spans.each(function(){
            var $span = $(this),
                $offset = $span.offset(),
                $overlay = $('<div class="overlay"/>');

            $overlay
                .offset($offset)
                .css({
                    width: $span.innerWidth(),
                    height: $span.innerHeight()
                }).show();

            $(document.body).append($overlay);
        });
    });
}

然后，我附上了$.keyup()事件的回调：

$('#term').keyup(function(event){
    var term = this.value;

    if (term == '') {
        $('.overlay').remove();
        return false;
    } else if (term.indexOf(' ') != -1) {
        this.value = term.replace(' ', '');
        return false;
    }

    $('.overlay').remove();

    highlightWordPositions(term);
});

http://jsfiddle.net/JaN75/

Answer 2

假设您指的是屏幕上显示字符的位置，以像素为单位：

jQuery或DOM不会在对象模型中对单个字符进行建模，因此您无法直接读取字符的位置。

我能想到的最好的方法是在角色之前（或之后）插入一个虚拟元素，例如：带有特殊类的零宽度跨度，然后得到它的位置。或者，您可以将角色包裹在这样一个特殊元素中，然后获取包装器的位置，宽度，高度等。

它仍然不是一件容易的事，因为你需要扫描HTML，并且你不想通过在不属于它们的地方插入标记来破坏HTML - 例如，如果你想匹配字符'd'，您不希望将<div>转换为<<span class="magic">d</span>iv>，因为这不是格式良好的HTML。

此外，插入这些虚拟元素可能会稍微改变布局，具体取决于浏览器处理字距调整的方式。

Answer 3

行动中：http://jsfiddle.net/WKgWM/

HTML：

<p>Percussus ait in fuerat construeret cena reges undis effugere quod una.</p>

JS：

var selection = "dis";
var spn = '<span class="selected">'+selection+'</span>';
$("p").html($("p").html().replace(selection,spn));

的CSS：

.selected{
  background-color:#FF00FF;
}

Answer 4

有一种更简单，更轻巧的方法（与其他建议覆盖的答案相比）来查找DOM元素中字母的位置：使用范围。

// returns { left, top, etc } in px
function getLetterPositions(myElementWithText, myTextElementIndex, myLetterPosition) {
    var range = document.createRange();
    range.setStart(myElementWithText.childNodes[myTextElementIndex], myLetterPosition);
    range.setEnd(myElementWithText.childNodes[myTextElementIndex], myLetterPosition+1);
    return range.getBoundingClientRect();
}

带有包含目标字母的文本的元素为myElementWithText（例如<div>）
带有文本（即textNode）的元素子元素位于索引myTextElementIndex（在大多数情况下为0）
您要查找的字母的位置为myLetterPosition（例如，如果文本为"abcd"，而您想要"c"，则为2）

如何在HTML中查找文本或<br/>的绝对或相对位置？

4 个答案: